vue-cli（webpack）增加发布到测试环境

发表于 | 更新于 | 分类于 |
字数统计 404 | 阅读时长 2

优化 vue-cli（webpack）实现：npm run build 发布到线上环境，npm run test 发布到测试环境，而不是每次切换发布环境的时候去代码里改具体的地址。

需求

打包的时候有两个地址，测试地址、线上地址，通过更改webpack配置实现npm run build打包时的API接口是线上地址，npm run test时的打包接口是测试环境地址。

1. package.json增加test命令

1
2
3
4
5
6
"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

更改如下代码：

1
2
3
4
5
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

更改如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

修改如下：

1
2
3
4
5
// 发布到测试环境
module.exports = {
  NODE_ENV: '"test"',  
  API_ROOT: '"http://adm_api.xiaoshentui.net/"'
}

5. 修改config/dev.env.js

添加打包到测试环境接口地址：

1
2
3
4
5
6
7
8
9
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'
})

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

0%