vue多环境变量

最新推荐文章于 2024-01-06 21:02:53 发布

RenBaiLi

最新推荐文章于 2024-01-06 21:02:53 发布

阅读量268

点赞数 2

分类专栏：环境配置文章标签： vue.js javascript

本文链接：https://blog.csdn.net/RenBaiLi/article/details/119993687

版权

环境配置专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何通过在Vue项目中使用package.json脚本和环境变量配置文件，实现开发、打包和测试环境的自动切换，避免手动修改配置。通过`.env`文件和`config`模块，动态设置baseurl，简化部署流程。

摘要由CSDN通过智能技术生成

前言：多环境变量是在项目开发·打包·生产时产生的概念，所谓的多环境，指的就是一个项目适配多种环境包括：

serve 是开发环境 --open 是运行的时候自动开出页面
build 打包环境
test 测试环境

如果配置多环境变量也是可以的，但是需要手动修改baseurl等配置，比如开发人员运行开发环境，就需要将baseurl修改成开发的基地址，测试人员修改成测试的，这样很乱，我们将环境变量设置成动态的，就不需要手动进行修改了，接下来我们看如何配置。

首先

1.在package.json全局里面配置

 "scripts": {
        "serve": "vue-cli-service serve",//开发
        "build": "vue-cli-service build",//打包
        "stage": "vue-cli-service build --mode staging"//测试
    },

2.在根目录下创建三个.env配置文件（和src同级）

分别写：

.env.development 里面写

NODE_ENV='development'

.env.production

NODE_ENV='production'

.env.staging

NODE_ENV='testing'

3.在src下面创建一个config文件夹然后下面配置js文件

env文件分别写入开发·打包·测试需要的基地址（以开发为例）

module.exports = {
    baseurl: 'http://120.53.31.103:84/api/app', // 开发~项目地址
}

在index中写入

const config = require('./env.' + process.env.NODE_ENV)
module.exports = config

这样就可以动态设置开发或生产的地址
4.全局导入（动态获取到的环境变量，导入到main.js）

5.配置完成，可以使用(page.json中写什么就是什么)

开发：npm run serve
打包：npm run build
测试：npm run stage

 "scripts": {
        "serve": "vue-cli-service serve",//开发
        "build": "vue-cli-service build",//打包
        "stage": "vue-cli-service build --mode staging"//测试
    },