解決vue項目配置測試環境後打包靜态資源路勁錯誤

因為項目需要配置幾個測試環境,以及生産環境，是以使用了

process.env.NODE_ENV

和啟動指令 來區分打包的環境是哪一個。

完成後發現一個問題：當 輸入

npm run test

時 打包後的路徑缺失了 config/index.js 裡面的

assetsPublicPath

路徑配置

assetsPublicPath 失效原因:

在build.js 檔案的開頭, 将環境命名改為 ‘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') // 加在這一行之前就好了