Vue-CLI环境变量和模式

最新推荐文章于 2024-08-13 10:42:10 发布

SoOnPerson

最新推荐文章于 2024-08-13 10:42:10 发布

阅读量691

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_35793301/article/details/103629952

vue.js 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍Vue-CLI中环境变量和模式的使用方法，包括如何设置不同环境下的请求地址和部署路径，以及如何通过修改配置文件实现开发、测试和生产环境的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue-CLI环境变量和模式

1、官方文档

2、场景

本地开发时请求地址，线上环境请求地址，不一致，部署路径不一致，其他环境变量因为部署环境不一致，方便打包和开发

3、代码

1、项目结构

.env 是所有的环境中都会被载入
.env.dev 是在指定模式中被载入
.env.product 是在指定模式中被载入

.env

NODE_ENV=local
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=http://ip:8080/local/

.env.product

NODE_ENV=production
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=http://ip:8080/production/

.env.dev

NODE_ENV=dev
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=http://ip:8080/dev/

package.json

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

vue.config.js

module.exports = () => {
  console.log('ENV=' + process.env.NODE_ENV)
  console.log('BASEURL=' + process.env.VUE_APP_API_BASE_URL)
  return {
    publicPath: '/CMS/'
  }
}