• 部署，你做的好啊，你做的好啊
• 省流助手

神中神的几篇博客，解决部署所有烦恼：

https://blog.csdn.net/weixin_43754275/article/details/105760905

https://blog.csdn.net/weixin_45678130/article/details/119953888

https://blog.csdn.net/weixin_43408077/article/details/119617391?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.showsourcetag&spm=1001.2101.3001.4242.1

• 实操部署

环境为腾讯云宝塔linux+vue3+vue-cli4

• 首先需要在本地将vue项目打包，执行npm run build。之前很多文章指出，在本地运行时，vue.config.js中的publicPath要设定为'/'，打包上传时修改为'./'，本人亲测多次发现这是不对的（比如直接访问子路由地址/xxx/xxx会报404）。问题分析与解决可以看第一篇博客（https://blog.csdn.net/weixin_43754275/article/details/105760905），在使用history模式后，publicPath依然需要设置为'/'，这样打包后才能获取到静态资源。这是本人觉得非常坑的一个点，如果使用history路由的同学可以注意一下。打包后的文件会存在dist目录下。

• 然后进入服务器，宝塔控制面板支持一键配置nginx。在安装好vue及其他所需包后，点击宝塔页面左侧的网站，选择添加站点，第一行可以随便输一个名字（之后再删掉），第二行输入IP及端口号。

• 进入站点文件夹（比如我的叫blog.com，那就进入这个文件夹），将本地的dist目录拷贝于此。回到站点界面，点击刚创建的站点，找到网站目录，添加/dist，因为访问的文件都放在该目录下。

• 找到配置文件栏，修改里面的监听端口，并且增加如下代码，表示访问某个路由时，让nginx去找。配完这一步，并为端口设置防火墙后，就可以访问我们的博客啦~

• 后记

之前配了好久搞到凌晨4点没成，睡醒重装了系统从头来顺利搞好了。只能说history模式下坑挺多。。。