vue环境部署与baseurl配置

最新推荐文章于 2026-01-07 15:29:18 发布

原创最新推荐文章于 2026-01-07 15:29:18 发布 · 3.1k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

ZDM_9999

关注

标签

#vue.js #javascript #前端

分类开发工具

本文详细介绍Vue项目的多环境配置方法，包括开发、测试及生产环境的设置。通过创建不同的.env文件来区分各种环境变量，并在package.json中定义相应的构建命令。

环境变量

在开发的时候一般会有三个环境：开发环境 测试环境 线上（生产）环境

vue 中有个概念就是模式，默认vue cli 有三个模式

development开发环境模式用于 vue-cli-service serve
production生产环境模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test测试环境模式用于 vue-cli-service test:unit

但是往往开发的时候可能不止有三种：

本地环境（local）
开发环境（development）
测试环境（devtest）
预发布环境（beta）
生产环境（production）

创建不同环境变量文件

通过为.env文件增加后缀来设置某个模式下特有的环境变量。

1、在项目根路径下设置新建对应文件.env.development(开发环境文件) .env.production(生产环境文件) .env.devtest(测试环境文件)

2、在每个文件写入如下内容（VUE_APP_随便写）

VUE_APP_XIAOMING = "开发模式"

package.json环境对应的执行语句

"scripts": {
    "serve": "vue-cli-service serve",//开发模式
    "build": "vue-cli-service build",//生产模式
    "dev_test_build": "vue-cli-service build --mode development_test",//测试模式
    "lint": "vue-cli-service lint"

  },

使用变量process.env.你的内容即可得到

mounted()=>{

    console.log(process.env.VUE_APP_XIAOMING);

   

}

打包生产环境

1、npm run build 会生成一个dist文件夹我们点开之后像运行html一样运行项目

2、配置生产环境（1）在vue.config.js中设置publicpath："./" (2)把路由模式设置为hash

3、重新build