vue cli（webpack）增加發布到測試環境

blacker2018發表於2018-07-02
VueWeb

優化 vue-cli2實現：npm run build 釋出到線上環境，npm run test 釋出到測試環境，而不是每次切換髮布環境的時候去程式碼裡改具體的地址。

需求

打包的時候有兩個地址，測試地址、線上地址，通過更改webpack配置實現npm run build打包時的API介面是線上地址，npm run test時的打包介面是測試環境地址。

1. package.json增加test命令

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "test": "node build/build-test.js" # 新增
  }
複製程式碼

2. 複製build/build.js，命名為build-test.js

更改如下程式碼：

process.env.NODE_ENV = "test";
// ...
const webpackConfig = require("./webpack.test.conf");

const spinner = ora("building for test...");
複製程式碼

3. 複製config/webpack.pro.conf.js，命名為webpack.test.conf.js

更改如下程式碼：

const env = require('../config/test.env')

// ...

const webpackConfig = merge(baseWebpackConfig, {
    // ...
  output: {
    // static資料夾打包到test檔案
    path: path.resolve(__dirname, '../dist-test')
  },
  // ...
})
//...

new HtmlWebpackPlugin({
    // index.html打包路徑
    filename: path.resolve(__dirname, '../dist-test/index.html'),
    // ...
}),
複製程式碼

4. 複製config/prod.env.js，命名為test.env.js

修改如下：

// 釋出到測試環境
module.exports = {
  NODE_ENV: '"test"',  
  API_ROOT: '"http://api.test.net/"'
}

複製程式碼

5. 修改config/dev.env.js

新增打包到測試環境介面地址：

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
// 引入test環境配置
const testEnv = require('./test.env')
// 本地開發環境
module.exports = merge(prodEnv,testEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"http://192.168.1.111:8080'
})
複製程式碼

至此，可以為所欲為了，不必每次打包都去更改地址了。

相關文章