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

小歪 | 前端

8813人浏览 · 2020-08-02 14:46:48

小歪 | 前端 · 2020-08-02 14:46:48 发布

前端打包

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

在这里插入图片描述

打包的时候这里就会自动匹配到创建的两个环境变量的文件里面
在这里插入图片描述
我们可以再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

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^