vue-cli3不同环境配置

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调用