Vue3多页面项目构建报错与CSP配置问题求助

问题1：构建冲突与页面渲染报错 #

构建报错 #

ERROR in Conflict: Multiple assets emit different content to the same filename index.html

生成的目录结构 #

dist_dev
├── static
├── home
│   └── index.html
└── index.html

页面渲染异常 #

根目录的dist_dev/index.html可按pages/index的chunk配置正常加载，但dist_dev/home/index.html无法正确渲染，报错：

Html Webpack Plugin:
<pre>
  ReferenceError: VUE_APP_CDN_ENVIRONMENT_URL is not defined

 - loader.js:12 eval
    [home.html?.]/[html-webpack-plugin]/lib/loader.js:12:11

 - loader.js:15 module.exports
    [home.html?.]/[html-webpack-plugin]/lib/loader.js:15:3

 - index.js:612 
    [employee-details]/[html-webpack-plugin]/index.js:612:16

 - async Promise.all

</pre>

解决步骤

1. 修复构建冲突
   冲突源于多页面输出路径配置重复，需在vue.config.js的pages字段中为每个页面指定唯一输出路径：

module.exports = {
  pages: {
    index: {
      entry: 'src/pages/index/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    home: {
      entry: 'src/pages/home/main.js',
      template: 'public/home.html', // 建议每个页面使用独立模板，避免变量冲突
      filename: 'home/index.html'
    }
  }
}

2. 修复环境变量未定义问题

• 确认项目根目录的.env文件中已声明变量：

  VUE_APP_CDN_ENVIRONMENT_URL=https://your-cdn-domain.com
  

• 在页面模板中通过htmlWebpackPlugin注入的环境变量引用，而非直接写变量名，比如模板中用：

  <script src="<%= htmlWebpackPlugin.options.env.VUE_APP_CDN_ENVIRONMENT_URL %>/xxx.js"></script>
  

• 在vue.config.js中通过chainWebpack为每个页面的HTML插件注入环境变量：

  chainWebpack: config => {
    Object.keys(config.entryPoints.store).forEach(page => {
      config.plugin(`html-${page}`)
        .tap(args => {
          args[0].env = process.env
          return args
        })
    })
  }
  

问题2：多页面架构下配置CSP策略 #

基于html-webpack-plugin和strict-csp-html-webpack-plugin为多页面配置CSP，步骤如下：

解决步骤 #

1. 安装依赖：

npm install html-webpack-plugin strict-csp-html-webpack-plugin --save-dev

2. 在vue.config.js中为每个页面的HTML插件添加CSP配置：

const StrictCspHtmlWebpackPlugin = require('strict-csp-html-webpack-plugin')

module.exports = {
  pages: {
    // 已有的多页面配置
  },
  chainWebpack: config => {
    Object.keys(config.entryPoints.store).forEach(page => {
      config.plugin(`html-${page}`)
        .use(StrictCspHtmlWebpackPlugin, [{
          directives: {
            defaultSrc: ["'self'"],
            scriptSrc: ["'self'", process.env.VUE_APP_CDN_ENVIRONMENT_URL],
            styleSrc: ["'self'", "'unsafe-inline'"], // 若使用CSS预处理器可能需要临时保留，后续可优化
            imgSrc: ["'self'", "data:", process.env.VUE_APP_CDN_ENVIRONMENT_URL]
            // 按需添加其他CSP指令，如fontSrc、connectSrc等
          }
        }])
    })
  }
}

3. 验证：构建完成后，查看页面的<head>标签，会自动生成包含CSP规则的<meta>标签。

内容的提问来源于stack exchange，提问作者Sudharsan Sathiya Narayanan