vue3.0 配置多页面后 骨架配置无效

Question

let path = require('path')
let SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
module.exports = {
    lintOnSave: false, //禁用eslint
    baseUrl:process.env.NODE_ENV === "production"?'/':'/',
    productionSourceMap: false,
    pages:{ index: {
        // page 的入口
        entry: 'src/pages/index/index.js',
        // 模板来源
        template: 'src/pages/index/index.html',
        // 在 dist/index.html 的输出
        filename: 'index.html',
        // 当使用 title 选项时，
        // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
        title: 'Index Page'
        },
    },
    devServer: {
        index: 'index.html', //默认启动serve 打开page1页面
        open: process.platform === 'darwin',
        host: '',
        port: 8088,
        https: false,
        hotOnly: false,
        proxy: {
            '/xrf/': {
                target: 'http://www.baidu.com/',
                changeOrigin: true,
                pathRewrite: {
                    '^/xrf': ''
                }
            }
        }, // 设置代理
        // before: app => {}
    },
    chainWebpack: config => {
        config.module
            .rule('images')
            .use('url-loader')
            .loader('url-loader')
            .tap(options => {
                // 修改它的选项...
                options.limit = 100
                return options
            })
        if(process.env.NODE_ENV === "production") {
            config.plugin("extract-css").tap(() => [{
                path: path.join(__dirname, "./dist"),
                filename: "css/[name].[contenthash:8].css"
            }]);
        }
    },
    configureWebpack: config => {
        // vue骨架屏插件配置
        config.plugins.push(new SkeletonWebpackPlugin({
            webpackConfig: {
            entry: {
                app: path.join(__dirname, './src/pages/index/skeleton.js'),
            },
            },
            minimize: true,
            quiet: true,
        }))
        if(process.env.NODE_ENV === "production") {
            config.output = {
                publicPath: '/',
                path: path.join(__dirname, "./dist"),
                filename: "js/[name].[contenthash:8].js"            
            };
        }
    },
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
}

Answer 1

在Vue 3.0中配置多页面应用时，如果骨架配置无效，可能有以下几个原因：

1. 骨架配置文件路径错误：在多页面应用中，每个页面都需要有自己的骨架配置文件。如果配置文件路径错误，那么该页面的骨架配置就会无效。要确保每个页面的骨架配置文件路径正确。

2. 骨架配置文件中的 ID 错误：在骨架配置文件中，需要为每个页面指定一个唯一的 ID。如果多个页面的 ID 相同，那么其中一个页面的骨架配置就会被覆盖。要确保每个页面的 ID 不同，并且和对应的 HTML 文件中的 ID 相同。

3. 骨架配置文件中的模板错误：在骨架配置文件中，模板需要和对应的 HTML 文件相匹配。如果模板错误，那么骨架配置就会无效。要确保每个页面的模板正确，并且和对应的 HTML 文件相匹配。

4. Webpack 配置错误：在多页面应用中，需要对 Webpack 进行相应的配置。如果配置错误，那么骨架配置就会无效。要确保 Webpack 配置正确，并且能够正确地处理多个页面的骨架配置。