vue项目如何打包部署到服务器(前端vue打包后部署方式)

背景

在当前背景下,前后端分离已经成为趋势,再也不是以前那个前后混合在一起的时代了。这次主要是记录下我从项目开发打包上线前部署时所遇到的坑,希望能帮助到其他小伙伴,后端部署没什么好讲的,主要是前端的部署。点赞,点赞,点赞!!!!

打包

(1)设置打包后的静态资源路径(重要说明:小编由于是新手在这里折腾了很久)

在vue.config.js下添加

publicPath : "/",(注意不要“./”,这样做有可能会造成资源路径加载错误,亲测。)

vue项目如何打包部署到服务器(前端vue打包后部署方式)(1)

注:具体不懂的同学可以参考官方文档: cli.vuejs.org/guide/deplo…

(2)在当前文件目录下运行 npm run build 即可完成打包

环境准备

我选用的是Nginx作为前端部署方式,当然你也可以选择tomcat,大同小异。

1.下载Nginx 官网:nginx.org/

下载过后打开Nginx->conf->config->nginx.conf

vue项目如何打包部署到服务器(前端vue打包后部署方式)(2)

nginx.conf配置

end:执行Nginx命令start Nginx 搞定了!!如果觉得有帮助的同学请给我一个赞吧!!,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页