VUE_vuecli如何打包部署

前端打包

• 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 dev",
    "build:prod": "vue-cli-service build --mode prod",

打包后的代码如何运行

• 不能双加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

打包的时候这里就会自动匹配到创建的两个环境变量的文件里面

我们可以再main.js文件里打印下看

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

打包后运行在控制台就能看到刚设置的环境变量

3.在请求baseURL替换成这个环境变量，从而设置成动态的
在动态指定变量的位置使用（process.env.VUE_APP_URL）

axios.defaults.baseURL = process.env.VUE_APP_URL