运行环境指令 和 打包注意点
- 首先 我们要搞清楚 环境变量是指 在不同环境中代码运行时的基地址变化。 而代码在不同环境运行时的指令 可以在配置文件 package.json 查看
-
- 有 serve 的就是在开发环境时的 运行指令
- 有 build 的就是在生产环境时的 运行指令--前提是要打包好
- 打包时要注意的是--- 要去配置文件 vue.config.js 中修改公共路径 publicPath 为： publicPath: './' ---这样就可以避免打包好的文件运行后无法发请求 和拿到图片 之类的 路径错误
如何设置好 在不同环境时 不同的基地址呢？
- 第一步 先把request.js中的 基地址 改为 baseURL： process.env.VUE_APP_URL ---- 这是他的调用方法
const _axios = axios.create({
//将基地址设置为动态的 根据不同环境 在不同.env文件中调用基地址
baseURL: process.env.VUE_APP_URL
})
- 第二步 先去到 .env.development 中 设置一个
----这是开发环境的基地址
-
- 如果没有.env.development文件 那就创建一个
- 第三步 去到 .env.production 文件中 可以设置 生产环境的基地址(也就是上线时的环境)，和上面一样 命名为 VUE_APP_URL: = 生产环境基地址
-
- 一 ： 开发环境基地址 必须要写在 .env.development 中
- 二 ： 生产环境基地址 必须写在 .env.production 中
- 三 ： baseURL: process.env.VUE_APP_URL 中的 VUE_APP_UR 一定要和 .env文件中基地址存放的 VUE_APP_URL 一致
- 四 ： 如果想看 自己处于什么开发环境 可以 在.env文件中 设置 VUE_APP_TITLE(TITLE随便起名) = ' 我是什么什么环境'， 然后去组件中 先在data中 存一下 比如: title: process.env.VUE_APP_URL 先将他赋值 然后 在html中利用插值语法{
{ title }}查看
如何创建 测试环境(自定义环境)？
- 首先 创建一个 文件 ---> .env.xxx(随便起名) ， 在这个文件中 写 ：VUE_APP_URL: = 测试环境基地址
- 第二步 我们要去到 配置文件 package.json 中 添加一个 我们测试环境的 运行指令 例：----> "build:xxx": "vue-cli-service build --mode xxx", 运行时输入 npm run build:xxx 就行了 运行命令可以随意改