Vue 項目開發(fā)時择镇，會使用到不同的運行環(huán)境髓考，例如：開發(fā)環(huán)境仁卷、測試環(huán)境纵刘、生產(chǎn)環(huán)境邀窃。
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時，默認(rèn)運行環(huán)境為development
build命令不攜帶--mode時假哎，默認(rèn)運行環(huán)境為production
在項目根目錄下新建各環(huán)境的配置文件
- .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調(diào)用
