解决vue项目配置测试环境后打包静态资源路劲错误

港控/mmm° 2022-12-27 09:22 273阅读 0赞

> 因为项目需要配置几个测试环境,以及生产环境，所以使用了 `process.env.NODE_ENV` 和启动命令 来区分打包的环境是哪一个。  
> 完成后发现一个问题：当 输入 `npm run test`时 打包后的路径缺失了 **config/index.js** 里面的 `assetsPublicPath` 路径配置

#### assetsPublicPath 失效原因: ####

在build.js 文件的开头, 将环境命名改为 ‘testing’

process.env.NODE_ENV = 'testing'

#### 解决 assetsPublicPath 失效方法: ####

打开 webpack.base.conf.js 文件  
找到 output 修改如下:

output: { 
        path: config.build.assetsRoot,
        filename: '[name].js',
        // 设置打包后静态资源访问路径
        publicPath: process.env.NODE_ENV === 'development'
          ? config.dev.assetsPublicPath
          : config.build.assetsPublicPath
      },

原代码配置如下:

output: { 
      path: config.build.assetsRoot,
      filename: '[name].js',
      // 设置打包后静态资源访问路径
      publicPath: process.env.NODE_ENV === 'production'
        ?config.build.assetsPublicPath
        : config.dev.assetsPublicPath
    },

`解释:` 比较代码可以发现, 当 `process.env.NODE_ENV == 'production'` 的时候, 打包会将 config.build.assetsPubilcPath 拼接到静态资源访问路径之前 所以当我将`process.env.NODE_ENV` 的值改为 'testing’的时候 打包会使用开发环境的路径配置, 所以导致 **assetsPublicPath** 失效  
所以修改 publicPath 判断方法 即可正确使用 **assetsPublicPath**  
`注意:` 设置之后会有开发环境启动空白页并报错 `Unexpected token '<'`  
需要在 webpack.dev.conf.js 文件中添加一行 `process.env.NODE_ENV = 'development'`  
表明这是开发环境 , 例如:

process.env.NODE_ENV = 'development' // 设置为开发环境防止启动空白页 
    const baseWebpackConfig = require('./webpack.base.conf') // 加在这一行之前就好了