百网思正是上线了。欢迎围观

vue3.0+cli 4 .0^ 单页面配置系列(一)--环境变量

前端 sinalmq 881浏览 0评论

依据vue-cli 搭建一个 vue3.0 的项目

通过这个命令

// vue create 项目名称 
vue create muzi

然后通过 npm 命令,把项目启动

npm run serve 

查看项目启动成功,不成功找找原因。

npm run serve 是如何启动

要完全解释这个问题,需要另外一片文章,这里主要围绕vue3.0环境变量。那么在vue这个项目中,发生了什么事情?

打开 项目的 package.json:找到如下代码

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }

npm run serve 会找到 package.json 然后 执行 上面这段代码,在依据 serve 执行vue-cli-service serve 这个命令, 而 vue-cli-service serve 这个是 脚手架集合的一开发服务器,因此在本地就可以运行我们的项目

当然这里我是用vue-cli来举例,这里可以配置其他的webpack也是可以的

现在有一个需求,开发环境需要启动一个代理服务请求,调试后端开发同事的接口,而生产环境不需要;也就是说,开发环境的配置代码和生产环境不一样,那么该怎么做?

逻辑

按照代码的书写逻辑,应该有一个判断比如:

 if(开发环境){
    ...
    执行开发环境的.config.js
 }else{
  ....
  执行生产环境的.config.js
 }

此时,就可以在相关配置里面各自书写不一样的代码。 想法很好,那么有两个问题需要解决,

  1. 这个判断代码应该写在哪里?用npm run 的时候自动执行
  2. ‘开发环境’ 这个变量应该判断在哪里赋值?

第一个问题: vue-cli 脚手架提供一个可以手动配置的webpack配置文件,叫做vue.config.js ,新的脚手架不会自动生成,需要手动。注意不能写错并且和package.json 同级目录。

此时 在执行 npm run 的时候会依据vue-cli-service 自动加载并且执行

第二个问题 if 里面 条件变量开发环境 怎么赋值 这个就涉及到环境变量,这个怎么操作?

环境变量ENV

在cli中通过在根目录下也就是和packge.json 同一级目录中 添加如下文件

.env

这个.env 文件本称之为 环境文件,打开编辑 定义的格式为‘键=值’

 VUE_APP_SECRET=secret

也可以定义其他的; .env 被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用;

现在打开vue.config.js 加入一行代码

console.log(process.env.VUE_APP_SECRET)

校验,是否有效果, 在控制太可以看到

secret

被打印出来了。但是好像还是不能明显的区别开发环境还是生产环境,继续

.env 的执行顺序

通常情况所有的环境开发环境、测试环境、生产环境都会执行.env 文件。那么到底怎么区分;很简单 如下定义即可

.env                 # 在所有的环境中被载入
.env.dev            # 只在指定的模式中被载入
.env.prd            # 只在指定的模式中被载入

有后缀的env要高于没有后缀的文件优先运行,也就是说 .env.dev 要高于 .env 的级别 到这里,就可以在不同的环境文件里面定义不同的环境变量,执行不同的配置

而现在需要解决 指定的模式;

模式

模式是 Vue CLI 项目中一个重要的概念,默认情况是如下:

development  模式用于 vue-cli-service serve
production  模式用于 vue-cli-service build  vue-cli-service test:e2e
test  模式用于 vue-cli-service test:unit

而现在,默认的不符合需求,需要自定义,执行 .env.dev 这里面的环境变量, 此时需要 --mode来实现,

打开 packge.json 设置如下脚本

 "dev": "vue-cli-service serve --mode dev"

此时 执行

npm run dev 

就会执行 .env.dev 从而获取到环境变量从而实现不同的环境加载不同的配置文件 生产环境也是一样,需要几个配置几个

总结实现完整的代码

配置.env.dev

```javascript VUE_APP_ENV=dev

配置.env.prd

```javascript
VUE_APP_ENV=prd

说明 VUE cli 中只有 VUE_APP_ 开头 才能 被识别为特定的环境变量,写入webpack.DefinePlugin 静态嵌入到客户端侧的包中

编写 vue.config.js

let runConfig = process.env.VUE_APP_ENV;
if(!runConfig){
  runConfig='dev'
}
let envConfig = require(`./build/${runConfig}.config.js`);
module.exports=envConfig;

编写 package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "vue-cli-service serve --mode dev",
    "build:prd": "vue-cli-service build --mode prd"
  }

开始测试

npm run dev   // 执行开发环境

打包生产环境

npm run build:prd 

结束 补充:

关于分离的配置文件如何合并?

如 base.config.js 和dev.config.js 是怎么合并的? 需要一个插件 webpack-merge,通过这个插件就能合并两个配置文件

const merge = require('webpack-merge');
const baseconfig = require('./base.config');
let devConfig ={
  publicPath:'/'
}
module.exports = merge(baseconfig,devConfig)

转载请注明: 百网思 » vue3.0+cli 4 .0^ 单页面配置系列(一)--环境变量

喜欢 (4) or 分享 ( 0)

发表我的评论

您尚未登录,请 登录注册 后评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(0)个小伙伴在吐槽