1.前言

1.不管讲多少遍,对这个不同的环境中 baseURL的配置还是很懵
2.今天在单独开篇文章写下吧
3.vue-cli 模式环境变量 官方说明
4.process 说明
5.最新脚手架 vue/clie 4x

---

2.模式

1.png

---

3. 环境变量

1. 环境变量规范 1.png

2.请注意，只有NODE_ENV，BASE_URL 和以 VUE_APP_开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

---

4.新建环境变量文件

1. 新建环境变量 1.png
   

   .env.development
   .env.test
   .env.production

---

2. 根据自己的情况新建 可以建好多个

NODE_ENV=production
VUE_APP_BASE_URL = 'http://yzs.com/production/'
VUE_APP_UpLOAD_URL = 'http://yzs.com/uload/'
VUE_APP_DOWN_LOAD_URL = 'http://yzs.com/download/'

---

3. NODE_ENV
4. NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。

---

5. package.json配置

1. 配置 1.png

---

2. 当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式
3. 例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。
4. NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。

---

2. 代码

  "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode test",
    "pro": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },

3. 这个 mode和 上述新建的环境变量名字保持一致
4. 测试的话可以把 serve 对应的模式变为 test,这样在本地运行先查看这个环境变量有没有切换成功

"serve": "vue-cli-service serve --mode test",

效果 process

1. 看打印 1.png
2. 上班配置指令模式,在这里可以进行本地测试

---

6.使用

1. 这里放在了请求拦截 相应拦截的封装当中

console.log('-------process-----', process.env.VUE_APP_BASE_URL)
console.log('-------env-----', process.env)
const service = axios.create({
    timeout: 5000,    //超时时间
    baseURL:process.env.VUE_APP_BASE_URL                               
    transformRequest: data => qs.stringify(data)    //post请求参数处理,防止post请求跨域
})

---

7. 服务器

1. 模拟下正经的流程
2. 我们创建个简单的node服务器
3. 指定静态资源目录/public
4. 前端项目执行打包指令,把打包后的文件(dist)/扔到这个服务器指定的静态资源目录里面
5. 运行这个服务器
6. 浏览器访问静态资源的 路径例如 image.png
7. 默认加载文件夹下的index.html文件
8. 如果这样操作,vue项目 config.js需要配置个publicPath: './',根据自己的项目情况实际来定

// node  这个最简单的服务器创建 掌握
// npm init -y 创建 package.json文件
// npm i express 安装
const express = require('express');
let app = express()
app.use(express.static("./public"))
app.post("/login",(req,res)=>{
    res.json({
        code:1000,
        msg:'登录成功',
        token:'看啥 俺就是token'
    })
})
app.get("/list",(req,res)=>{
    res.json({
        code:1001,
        msg:'没有查询到数据'
    })
})
app.listen(9090,()=>{
    console.log('9090服务启动');
})

---

8. 后记

纸上得来终觉浅,绝知此事要躬行

---

参考资料

axios api配置
vue-cli 模式环境变量
process说明

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;如有错误,欢迎交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉