Vue3 | .env配置全局环境变量：开发、生产、测试

嗷呜ouu
3,398 阅读3分钟

需求

  • 多种环境配置：开发环境、生产环境、测试环境

代码

1. 配置不同环境

  • 配置须知：
    • 在vue项目中，env是全局配置文件，可以存储不同环境下的变量。使用vue-cli搭建项目，默认会在根目录创建一个.env文件。
    • .env文件是默认的全局配置环境，不论什么环境都会加载并合并
      • 可以不要.env文件
      • 开发环境和测试、正式环境的请求域名不同，可以在.env文件中定义一个全局的URL，在请求封装中使用
    • 可以通过创建不同的 .env 文件来为不同环境设置不同的环境变量
    • 定义自定义的变量必须以VUE_APP_开头，如VUE_APP_DOMAIN
    • 由于.env文件在项目启动时被加载，并在运行时创建环境变量，所以修改了.env文件中的变量后，需要重新启动项目才能使变量生效
    • 设置环境变量：不同环境下的API端点、主机名、端口号等
  • 开发环境：.env.development文件，使用npm run server时默认会加载此配置文件
NODE_ENV = "development"  //开发环境标志
VUE_APP_BASE_API = "/xxx_admin_test"  //API基础路径变量，此时为http://localhost:8080/xxx_admin_test
VUE_APP_DOMAIN = "http://localhost:8080"  //域名
VUE_APP_REDIRECT_URL = ""  //ADFS重定向URL，用于OAuth或单点登录流程中用户认证完成后重定向到这个URL来获得token
VUE_APP_CLIENT_ID = "xxxxxxxxxxxxxxx"  //OAuth客户端ID，用于OAuth授权
BASE_URL = ""  //路由基础路径，一般为空，表示应用的跟路径
  • 生产环境：.env.production文件，使用npm run build时默认会加载此配置文件
NODE_ENV = "production"
VUE_APP_BASE_API = "/xxx_admin"
VUE_APP_DOMAIN = "http://xxx.xxx"
VUE_APP_REDIRECT_URL = "http://xxx.xxx/getToken"
VUE_APP_CLIENT_ID = "xxxxxxxxxxxxxxx"
BASE_URL = ""
  • 测试环境
NODE_ENV = "test"
VUE_APP_BASE_API = "/xxx_admin_test"
VUE_APP_DOMAIN = "http://xxx.xxxx/xxx_test/"
VUE_APP_REDIRECT_URL = "http://xxx.xxxx/xxx_test/getToken"
VUE_APP_CLIENT_ID = "xxxxxxxxxxxxxxx"
BASE_URL = "/xxx_test"
  • 其他环境：.env.自定义名称文件，如云环境.env.cloud，内部测试环境.env.bata

2. 编写启动命令

  • 须知：
    • 除了.env文件会自动被加载外，其他环境需要手动的添加加载指令
  • 添加加载指令：
{
    "name": "xxx",
    "version": "0.1.0",
    "orivate": true,
    "scripts": {
        "serve": "vue-cli-service serve",  //启动项目，使用npm run serve指令自动加载.env和.env.development配置文件，所以不用写 --mode
        "build": "bie-cli-service build",  //生产环境打包，使用npm run build指令时，会自动加载.env和.env.production配置文件
        "lint": "vue-cli-service lint",
        "build:dev": "bie-cli-service build --mode developmemt",  //使用npm run build:dev指令运行时，会加载.env.developmemt配置文件
        "build:test": "bie-cli-service build --mode test",  //测试环境打包
        "build:cloud": "bie-cli-service build --mode cloud",  //云环境打包
    }
}

3. 获取环境变量

  • js中访问环境变量：process.env.xxx访问.env文件中的xxx变量
    • 在.env文件中设置了变量VUE_APP_BASE_URL = 'https://www.baidu.com'，只需要通过process.env.VUE_APP_BASE_URL就可以获取到
    • process.env获取当前环境变量
    • if(process.env.NODE_ENV === "development")
    • const url = VUE_APP_REDIRECT_URL
  • vue组件中访问环境变量：{{ $env.xxx }}，通过Vue.js的$env对象访问环境变量的所有值
<template>
    <div>
        <p>API Endpoint: {{ $env.VUE_APP_API_ENDPOINT }}</p>
        <p>Log Level: {{ $env.VUE_APP_LOG_LEVEL }}</p>
    </div>
</template>
  • 路由配置中base参数：base: process.env.BASE_URL
import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";

const routes = [
    { 
        //静态路由
        path: '/', 
        name: 'Home', 
        component: Home,
        meta: { title: "HOME" },
    }, {
        //动态路由
        path: '/user/:id',
        name: 'User',
        component: User,
        meta: { title: "USER" },
    }, {
        //嵌套路由
        path: '/dashboard',
        component: Dashboard,
        children: [
        {
            path: '',           //路由为`/dashboard`
            component: Overview,
            meta: { title: "DB" },
        }, {
            path: 'profile',    //路由为`/dashboard/profile`
            component: Profile,
            meta: { requiresAuth: true },
        }, {
            path: 'settings',   //路由为`/dashboard/settings`
            component: Settings,
            meta: { requiresAuth: false },
        } ]
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes，
    base: process.env.BASE_URL,
})

export default router;
  • 运行npm run serve:prod image.png
    • 此时的环境变量process.env为image.png
avatar
文章
阅读
粉丝