当前位置： 首页>后端>正文

vue3.0 多环境配置

后端2024-05-05 03:02:56

最常见的多环境配置，就是开发环境配置,和生产环境配置(也就是上线的配置)，很多情况下我们开发环境下的域名，和一些配置项,和我们生产模式下的不同，这个时候就需要我们进行多环境配置，不然每次发版都要改一波数据多麻烦。另一种情况就是你两个项目是用的一套代码，但是最后又要分别打成不同的包，那么这个时候多环境配置就大大提升了开发效率。

配置文件创建位置

.env 文件创建在 vue 项目的根目录下，和 package.json同级 ，如下图所示：


vue3.0 多环境配置,第1张
vue项目根目录

.env 文件配置

.env 文件的命名方式

网上大部分都说是命名为： .env.dev/ .env.prod/ .env.test

但 .env 格式的命名并不局限于这三种，他的命名方式可以多种多样，只需要文件开头为.env ，后面的名字你想怎样都可以。

特殊的命名方式：

  • .env.pord 打包 vue 会压缩代码，另外两种命名方式在 vue 中没有做特殊处理。
  • .env 默认 vue 配置文件
  • .env.***.local git 会忽略

.env文件的配置

可以在文件里填写任何想要的东西，如想在项目全局都能获取到名字，便可直接在 .env 里配置。默认的调试，打包命令都直接调用 .env 文件里的配置。

.env 文件配置：

//以 VUE_APP_*** 的形式命名，后面大写还是小写都可以
NODE_ENV=production
VUE_APP_SERVER=http://127.0.0.1:8080
VUE_APP_NAME = "飞云"
VUE_APP_ABBREVIATION = "fy"
VUE_APP_LOGO = "fy"

默认的调试，打包命令都会调用 .env 格式

npm run build
npm run serve

当配置文件 NODE_ENV=development 时, build 的 dist 文件为 vue 创建项目时的初始页面，原因可能是因为前端开始时不用打包，只有发布到测试环境和生产环境时需要打包。

配置运行环境

在 vue 项目 src 目录下的 main.js 文件引入的 axios 命令下方，直接定义 axios 的 baseURL，即可在其他页面中完成域名的切换。


vue3.0 多环境配置,第2张
main.js
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "serve:linux": "vue-cli-service serve --mode linux",
    "build:linux": "vue-cli-service build --mode linux",
    "serve:local": "vue-cli-service serve --mode local",
    "build:local": "vue-cli-service build --mode local"
  },

build: 和 serve: 后面的名字要与 .env 后面接的名字对应 ，这在运行的时候才能找到相应的配置项。

.env是默认配置项，当运行环境配置项的时候，会将默认配置项和运行的环境配置项融合，在参数相同的情况下，会以环境配置项为主，简单来说就是，默认配置项存在，环境配置项也存在，这个时候运行哪个环境配置项，就以哪个环境配置项的值为准，如果默认配置项存在，环境配置项不存在，那么运行环境配置项的时候同样也可以拿到默认配置项的值。

运行指定的环境

根据 package.json 中填写的 key 来确认运行指定环境的命令。如 "build:linux": "vue-cli-service build --mode linux",

若想运行 .env.linux 配置环境来进行打包，则可输入：npm run build:linux

也可通过 pycharm 的 npm 展示 窗口直观的看到命令的配置：

vue3.0 多环境配置,第3张

获取配置信息

如想在 js 中拿到 VUE_APP_NAME = "飞云"，可直接在想赋值的地方写上这行代码即可 process.env.VUE_APP_NAME

修改 axios 请求地址支持多环境

引用 VUE_APP_SERVER

在页面引入的 axios 命令下方，直接定义 axios 的 baseURL。

import axios from 'axios';
axios.defaults.baseURL=process.env.VUE_APP_SERVER;

页面使用

修改页面中调用 axios 的请求地址，只留下路径即可


vue3.0 多环境配置,第4张

知识点

  • 配置文件需要创建在 vue 项目的根目录
    • .env.** 的命名不局限于 prod dev test
    • 配置书写采用键值对，= 连接
    • 自定义变量必须以VUE_APP_开头
    • NODE_ENV=development 时,build 结果是不正确的
  • package.json 下添加新增的环境配置
    • .env.xxx，后缀xxx和package.json里的指令的–mode xxx对应
  • 通过设置axios.defaults.baseURL，来统一设置后端的IP端口或域名

https://www.xamrdz.com/backend/37h1942648.html

相关文章：