技術標籤：assetsPublicPath失效vue打包vue打包路徑錯誤

因為專案需要配置幾個測試環境,以及生產環境，所以使用了 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

process.env.NODE_ENV = 'development' // 設定為開發環境防止啟動空白頁 
const baseWebpackConfig = require('./webpack.base.conf') // 加在這一行之前就好了