打包前端项目以我自己的项目为例，在项目根下的vue.config.js中配置部署应用包时的基本URLpublicPath路径，如果不配置，默认为publicPath:"/";module.exports={publicPath:"/",};为了统一vue-router路由的base和publicPath，可以这样写：constrouter=newVueRouter({mode:'history',base:process.env.BASE_URL,routes})结束项目，需要把打包好的dist里面的文件放到服务器上，然后在服务器上配置nginx（linux系统）配置nginx因为我的项目使用的是腾讯云服务器（centos6.5），所以我就用这个例子下载安装nginx参考：https://www.runoob.com/linux/...安装编译工具和库yum-yinstallmakezlibzlib-develgcc-c++libtoolopensslopenssl-devel必须先安装PCREPCRE才能使Nginx支持Rewrite功能。[root@bogonsrc]#cd/usr/local/src/[root@bogonsrc]#wgethttp://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz解压安装Package[root@bogonsrc]#tarzxvfpcre-8.35.tar.gz进入安装目录编译安装[root@bogonsrc]#cdpcre-8.35[root@bogonpcre-8.35]#./configure[root@bogonpcre-8.35]#make&&makeinstall查看pcre版本[root@bogonpcre-8.35]#pcre-config--version下载、编译安装nginx[root@bogonsrc]#cd/usr/local/src/[root@bogonsrc]#wgethttp://nginx.org/download/nginx-1.18.0.tar.gz解压安装包[root@bogonsrc]#tarzxvfnginx-1.18.0.tar.gz进入安装目录[root@bogonsrc]#cdnginx-1.18.0编译安装[root@bogonnginx-1.18.0]#./configure--prefix=/usr/local/webserver/nginx--with-http_stub_status_module--with-http_ssl_module--with-pcre=/usr/local/src/pcre-8.35[root@bogonnginx-1.18.0]#make[root@bogonnginx-1.18.0]#makeinstall检查nginxversion查看是否安装成功[root@bogonnginx-1.18.0]#/usr/local/webserver/nginx/sbin/nginx-v安装成功！！！配置nginx，搭建云服务器，配置nginx并将打包好的前端工程放到nginx安装目录（/usr/local/webserver/nginx)=>html，然后找到nginx安装目录=>conf=>nginx.conf，编辑nginx.conf文件vinginx.conf把这一段换成这样：改成这样：location/{indexindex.html指数。htm;try_files$uri$uri//index.html;}保存文件：wq注意：SPA是一个web应用或者网站的模型，所有的用户交互都是通过动态重写当前页面，无论我们在应用中有多少页面，所有的构造只会产生一个index.html.当我们进入子路由刷新页面时，web容器中没有对应的页面就会出现404。解决方案：只需配置将任何页面重定向到索引。html，将路由交给前端，修改nginx配置文件.conf，添加try_files$uri$uri//index.html；所以如果前端项目路由使用history模式，如果使用默认配置，页面可能会刷新404问题详情请参考：https://vue3js.cn/interview/v...vue-cli官方文档：https://cli.vuejs.org/zh/conf...启动nginx/usr/local/webserver/nginx/sbin/nginx设置云服务器安全组规则打开入口，找到云服务器控制台安全组配置规则，点击一键释放，关闭防火墙：chkconfigiptablesoff，输入公网id地址查看结果，到这一步就大功告成了！！！常用命令/usr/local/webserver/nginx/sbin/nginx-sreload#重新加载配置文件/usr/local/webserver/nginx/sbin/nginx-sreopen#重启Nginx/usr/local/webserver/nginx/sbin/nginx-sstop#停止Nginxchkconfigiptablesoff#关闭防火墙/usr/local/webserver/nginx/sbin/nginx-t#查看配置文件nginx.conf的命令写在最后。我是AndyHu，目前是一名前端搬砖工程师。文中如有错误，欢迎在评论区指正。如果本文对你有帮助，欢迎点赞关注，让灵魂掌控自己的肌肤才是真正的自由！！！
