您好,登录后才能下订单哦!
这篇文章主要讲解了“Vue项目打包部署的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue项目打包部署的方法是什么”吧!
我们需要准备一个vue项目(vue-cli3或vue-cli4)、一个nginx服务器
配置vue.config.js中的publicPath
配置vue-router的模式为history
配置vue-router中的base(基态路由【与服务端配合】)
使用npm run build生成dist文件夹
配置nginx代理(进行生产环境下的反向代理,注意生产环境下devServer无效【或者你可以配置devserver的根目录是dist都可以】)
配置nginx路由
如果你的项目中没有这个文件,直接在项目根目录创建它即可
1.配置publicPath
这里我们配置publicPth为路由/vue/
module.exports = { // /vue/这个名字你自己起,也可以用我这个 publicPath: process.env.NODE_ENV === "production" ? "/vue/" : "./", outputDir:'dist', }
为了兼容各种情况,我强烈建议大家路由写成/vue/而不是写成/vue
1.配置路由模式和基础路由
export default new Router({ // history模式,需要和服务端配合才能在生产环境下正常使用 mode: 'history', // 基本路由,这个名字可以自己起,但是要注意和vue.config.js里面publicPath所起的名字一致 base:'/vue/', routes:[] })
我们在vue项目根目录下运行npm run build就可以进行项目的打包了。打包后会生成dist文件夹,把它放进nginx的html文件夹下即可
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项目打包部署的方法是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。