Vue 项目开发时，会使用到不同的运行环境，例如：开发环境、测试环境、生产环境。
package.json
主要是配置scripts里命令的--mode
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint",
"test": "vue-cli-service build --mode test"
}
serve命令不携带--mode时，默认运行环境为development
build命令不携带--mode时，默认运行环境为production
在项目根目录下新建各环境的配置文件
- .env.development
NODE_ENV = 'development'
VUE_APP_URL = 'https://development'
- .env.production
NODE_ENV = 'production'
VUE_APP_URL = 'https://production'
- .env.test
NODE_ENV = 'test'
VUE_APP_URL = 'https://test'
需要注意的是
- 配置文件的后缀要与
package.json的scripts的--mode的值要相等 - 变量必须以
VUE_APP_开头
在main.js中配置全局属性
vue2
import Vue from 'vue'
import App from './App.vue'
Vue.prototype.$config = process.env
new Vue({
render: h => h(App),
}).$mount('#app')
vue3
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$config = process.env
app.mount("#app")
可以使用this.$config调用
