Vue项目打包部署全过程(history模式)
作者：大前端工程师
vue项目中我们比较常用的模式为hash和history模式,下面这篇文章主要给大家介绍了关于Vue项目打包部署的全过程,讲解的是vue-router中history模式的部署,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
前提准备
我们需要准备一个vue项目（vue-cli3或vue-cli4）、一个nginx服务器
本教程讲解的是vue-router中history模式的部署，完全适用于vue-cli3,4。vue-cli2需要进行略微改动
部署流程
- 配置vue.config.js中的publicPath
- 配置vue-router的模式为history
- 配置vue-router中的base（基态路由【与服务端配合】）
- 使用npm run build生成dist文件夹
- 配置nginx代理（进行生产环境下的反向代理，注意生产环境下devServer无效【或者你可以配置devserver的根目录是dist都可以】）
- 配置nginx路由
vue.config.js
如果你的项目中没有这个文件，直接在项目根目录创建它即可
1.配置publicPath
这里我们配置publicPth为路由/vue/
module.exports = {
// /vue/这个名字你自己起，也可以用我这个
publicPath: process.env.NODE_ENV === "production" ? "/vue/" : "./",
outputDir:'dist',
}为了兼容各种情况，我强烈建议大家路由写成/vue/而不是写成/vue
vue-router
1.配置路由模式和基础路由
export default new Router({
// history模式，需要和服务端配合才能在生产环境下正常使用
mode: 'history',
// 基本路由，这个名字可以自己起，但是要注意和vue.config.js里面publicPath所起的名字一致
base:'/vue/',
routes:[]
})npm run build
我们在vue项目根目录下运行npm run build就可以进行项目的打包了。打包后会生成dist文件夹，把它放进nginx的html文件夹下即可
nginx
1.配置nginx代理
有些时候我们需要请求一些跨域服务，在开发时，我们可以配置devServer的proxy实现跨域访问。
但是在npm run build后，我们会发现代理无效。这是因为生产环境下的文件已经脱离devServer了，所以自然代理就没有用了，所以一般生产环境代理我们使用nginx去做
location /api/{
proxy_pass http://121.36.94.221:6600/;
index index.html index.htm;
}
location /info/{
proxy_pass http://ckk.xiaoandcai.cn/;
index index.html index.htm;
}假设我们的nginx服务器的端口号是8080,
那么我们做跨域请求时候只需要访问：localhost:8080/api就行了，这样做我们就相当于访问那个服务器下的资源
但是一般部署项目的时候我们不会发送axios去请求localhost:8080/api，我们会直接请求/api
举个例子
//不会这样做，因为部署服务器后地址要换成ip，不然会404
axios.get("localhost:8080/api")
//你可以选择这样做，但是我们不推荐
axios.get("ip:8080/api")
//我们推荐这样做，让axios根据相对路径补全ip+端口，这样比较省心【但是要注意你的项目要部署在nginx代理服务器下。如果你不部署的话相对路径也是不行的，毕竟你都没部署人家nginx服务器上，自然你的项目就不是nginx家的孩子，所以相对路径的小名，nginx怎么能认识呢？】
axios.get("/api")2.配置nginx路由
location / {
root html;
index index.html index.htm;
autoindex on; #开启nginx目录浏览功能
autoindex_exact_size off; #文件大小从KB开始显示
charset utf-8; #显示中文
}
# 写我们的路由暗号/vue
location /vue{
# alias后面写项目所在目录 xxxxxxx一定要注意，不能写成D:\nginx\nginx-1.20.0\html\dist，要写成斜杠/形式，否则会404
alias D:/nginx/nginx-1.20.0/html/dist;
charset utf-8; #显示中文
}现在启动nginx服务器输入localhost:8080/vue就可以访问我们的vue项目了
总结
到此这篇关于Vue项目打包部署的文章就介绍到这了,更多相关Vue项目打包部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！