1.前言
1.不管讲多少遍,对这个不同的环境中 baseURL的配置还是很懵
2.今天在单独开篇文章写下吧
3.vue-cli 模式环境变量 官方说明
4.process 说明
5.最新脚手架 vue/clie 4x
2.模式
1.png
3. 环境变量
- 环境变量规范
1.png
2.请注意，只有
NODE_ENV，BASE_URL 和以 VUE_APP_开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
4.新建环境变量文件
- 新建环境变量
1.png
.env.development
.env.test
.env.production
- 根据自己的情况新建 可以建好多个
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/'
- NODE_ENV
- NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。
5. package.json配置
- 配置
1.png
- 当运行
vue-cli-service命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含NODE_ENV变量，它的值将取决于模式- 例如，在
production模式下被设置为"production"，在test模式下被设置为"test"，默认则是"development"。NODE_ENV将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。
- 代码
"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"
},
- 这个 mode和 上述新建的环境变量名字保持一致
- 测试的话可以把 serve 对应的模式变为 test,这样在本地运行先查看这个环境变量有没有切换成功
"serve": "vue-cli-service serve --mode test",
效果 process
- 看打印
1.png- 上班配置指令模式,在这里可以进行本地测试
6.使用
- 这里放在了请求拦截 相应拦截的封装当中
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. 服务器
- 模拟下正经的流程
- 我们创建个简单的
node服务器- 指定
静态资源目录/public- 前端项目执行
打包指令,把打包后的文件(dist)/扔到这个服务器指定的静态资源目录里面- 运行这个服务器
- 浏览器访问静态资源的 路径例如
image.png- 默认加载文件夹下的
index.html文件- 如果这样操作,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. 后记
纸上得来终觉浅,绝知此事要躬行
