Vue|Vue Cli 脚手架分离测试环境和正式环境
Vue Cli构建的项目只有npm run dev和npm run build两条开发和编译的命令，那如何构建测试环境的？
在build文件夹中创建test.js文件
test.js中的代码很简单，就两行。主要就是配置一个环境变量用以区别测试和正式环境。这里没有直接修改原有的process.env.NODE_ENV是担心会影响到原本的逻辑。
注意：type的值必须单双引号两层嵌套，不能直接为’test’，否则会报错
// 配置环境变量 type 为 test
process.env.type = '"test"'
// 引入build.js文件，执行原先的编译代码
require('./build')
修改config文件夹中的prod.env.js文件
配置好后就可以在项目代码中调用process.env.type了
module.exports = {
NODE_ENV: '"production"',
// 将上文设置的环境变量，赋值到 type 属性上
type: process.env.type
}
在package.json文件中添加npm run test命令
添加一条命令，执行我们上文创建的test.js文件
"scripts": {
"dev": "node build/dev-server.js",
"test": "node build/test.js",
"build": "node build/build.js"
},
【Vue|Vue Cli 脚手架分离测试环境和正式环境】在项目代码中判断环境
按照上述的步骤做完后，就可以在项目代码中写判断了
let baseURL
// 开发环境
if (process.env.NODE_ENV === 'development') {
baseURL = 'http://192.168.1.120:8100/'
// 编译环境
} else {
// 测试环境
if (process.env.type === 'test') {
baseURL = 'http://test.xxx.com/'
// 正式环境
} else {
baseURL = 'http://app.xxx.com/'
}
}推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- 如何在手机上查看测试vue-cli构建的项目