webpack vue-cli2 配置打包測試環境

目前vue-cli2上原配置是只有開發環境dev和線上環境prod的配置，但是我們實際場景上還有很多需要一個測試環境test,下面就是對測試環境的配置，將測試環境和線上環境的打包代碼分開就不需要切來切去了

1. 復制一份build/build.js文件命名為build/build-test.js 修改這三處地方

 

 

2. 復制一份build/webpack.prod.conf.js文件命名為build/webpack.test.conf.js 修改這三處地方

 

3. 復制一份config/prod.env.js文件命名為config/test.env.js

test.env.js

'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  BASE_URL: 'https://test.com'
})

3.1在dev 和 prod 配置文件也分別加上 BASE_URL

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_URL: 'https://localhost:8080'
})

 

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_URL: 'https://prod.com'
}

 

4.在package.json文件里添加一條 npm run test 的啟動項

 

 

運行npm run test可以看到test的代碼已構建到dist-test目錄下

 

5.可以在封裝axios的時候帶上process.env.BASE_URL

import Axios from 'axios'

const axios = Axios.create({
    baseURL: process.env.BASE_URL, 
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    }
})
export default axios;

參考：https://www.jianshu.com/p/30d30d2835b2?tdsourcetag=s_pcqq_aiomsg

此處還需要注意兩點：

1、三個文件prod.env.js，dev.env.js，test.env.js中的BASE_URL也要加上雙引號,因為是node環境的變量

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_URL: '"https://prod.com"'
}

2、當運行test命令打包時，會出現頁面資源js和css是引入的絕對路徑，加載失敗的情形，此時需要修改webpack.base.conf.js文件中的publicPath選項

 

使test打包的路徑和build的保持一致