好物优选点击查看详情 京东购买

暂无内容

宝塔面板部署vue项目

部署方式

将vue项目进行打包

npm run build

运行之后生成dist文件夹

1.购买阿里云 、腾讯云 等 服务器 如下图:

宝塔面板部署vue项目插图

2.购买域名

宝塔面板部署vue项目插图1

3.然后进行远程链接

宝塔面板部署vue项目插图2

4.安装后登录宝塔面板

宝塔面板部署vue项目插图3

4.1新建网站

宝塔面板部署vue项目插图4

输入域名,创建FTP,因为没有用到PHP,选择纯静态即可。

宝塔面板部署vue项目插图5

创建完成之后去FTP上传dist文件夹的内容到相应的路径

宝塔面板部署vue项目插图6

宝塔面板部署vue项目插图7

验证网站 在上传完网站文件之后,输入设定的域名就可以访问网站了。

踩坑记录

vue项目部署后刷新页面出现404错误

原因是由于vue项目使用history模式,只需要将之改成hash重新打包上传即可。

另一个解决方法是在服务端解决:

在宝塔面板网站菜单,找到部署的vue站点,打开设置,在配置文件设置中添加以下代码:

location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; }

添加到如下位置:

宝塔面板部署vue项目插图8

原文链接:https://blog.csdn.net/m0_58946045/article/details/126774935

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享