实现的功能：
- 自动区分本地环境、测试环境、线上环境的域名
- 自动区分本地环境、测试环境、线上环境的静态资源路径
- 本地环境、测试环境、线上环境打包到不同的文件目录
1.修改config/index.js文件（现在的index.js中只包含了dev和build部分，我们需要复制一份build,然后将名字改为test，并修改对应的index、assetsRoot、assetsSubDirectory、assetsPublicPath）
config/index.js.png
-
index:编译后index.html文件存放的目录地址 -
assetsRoot:编译后静态资源(css、js、img等)存放的目录地址 -
assetsSubDirectory:用来包裹静态资源的文件夹名称 -
assetsPublicPath:静态资源路径
2.复制一份webpack.prod.conf.js,命名为webpack.test.conf.js(这个文件的很多地方都是引用的config/index.js文件中的变量，所以需要将文件中对应的config.build.xxx修改为config.test.xxx,有几个地方尤其需要注意)
webpack.test.conf.js1.png
webpack.test.conf.js2.png
注：同时需要在webpack.prod.conf.js文件的同样位置增加publicPath来配置线上环境的静态资源路径
webpack.test.conf.js3.png
3.复制一份build.js并命名为build-test.js(这个文件是执行命令时执行的文件)修改下面几处：
build-test.js.png
4.在package.json里面加上npm run test这条命令
package.json.png
"test": "node build/build-test.js"
5.修改utils.js文件
utils,js.png
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: (process.env.NODE_ENV === 'testing' ? config.test.assetsSubDirectory : config.dev.assetsSubDirectory)
6.修改vue-loader.conf.js文件（可以解决测试环境编译后没有css文件的问题）
vue-loader.conf.js.png
7.修改webpack.base.conf.js
webpack.base.conf.js.png
！8.配置不同环境的域名
- 复制config/prod.env.js文件，命名为config/test.env.js
- dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./dev.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_URL:'"本地接口请求域名"' //注意是单引号加双引号的格式
})
- test.env.js
'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')
module.exports = merge(devEnv, {
NODE_ENV: '"testing"',
BASE_URL: '"测试环境接口请求域名"' //注意是单引号加双引号的格式
})
- prod.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_URL:'"线上环境接口请求域名"' //注意是单引号加双引号的格式
})
9.使用axios
- 在main.js里面配置axios的默认baseURL
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.withCredentials = true
axios.defaults.baseURL = process.env.BASE_URL
- 调取接口的组件
this.$axios.post('/getActivityInfo').then((res)=>{
//....
})
10.命令
- 本地：npm run dv
- 测试：npm run test
- 线上：npm run build
