前端打包

  • npm run build
    打包的发布的代码
    相当于执行的package.json里面的vue-cli-service build

增加打包命令：

  • npm run build:dev --开发环境
  • npm run build:prod --线上环境
  • packge.json文件
"build:dev": "vue-cli-service build --mode development",
"build:prod": "vue-cli-service build --mode production"

在这里插入图片描述

打包后的代码如何运行

  • 不能双加dist/index.html
  • 放在http容器运行 serve tomcat nginx iis
  • npm i -g serve(安装serve容器)
  • 启动打包后的目录 :
    serve dist
    访问地址：http://localhost:5000

打包指定不同的环境变量

  • 添加环境变量

1.开发环境：
根目录创建文件 .env.dev
dev名字与package.json中的mode对应

## 开发环境
NODE_ENV=development
## 必须以VUE_APP开头
VUE_APP_URL=http://www.dev.com

在这里插入图片描述

2.线上环境：
根目录创建文件 .env.prod
prod名字与package.json中的mode对应

## 线上环境
NODE_ENV=production
## 必须以VUE_APP开头
VUE_APP_URL=http://www.dev.com

在这里插入图片描述

打包的时候这里就会自动匹配到创建的两个环境变量的文件里面
VUE_vuecli如何打包部署-小白菜博客
我们可以再main.js文件里打印下看

console.log(process.env.NODE_ENV,process.env.VUE_APP_URL)

VUE_vuecli如何打包部署-小白菜博客
打包后运行在控制台就能看到刚设置的环境变量
VUE_vuecli如何打包部署-小白菜博客
3.在请求baseURL替换成这个环境变量，从而设置成动态的
在动态指定变量的位置使用（process.env.VUE_APP_URL）

axios.defaults.baseURL = process.env.VUE_APP_URL

在这里插入图片描述