如何在宝塔上运行Vue工程
本文介绍了如何将vue生成的网站部署到宝塔,并解决了vue部署在tomcat中出现的404问题
·
1、宝塔平台添加站点
宝塔后台“网站”菜单项,“添加站点”,目的是绑定域名、添加反向代理
不创建FTP、不创建数据库、PHP版本选择纯静态
2、绑定域名
可以从宝塔平台申请免费的ssl证书
3、添加反向代理
将指定的域名反向代理,指向指定的端口
4、vue打包
npm run build
5、上传
将打包好的网站数据,上传到站点相应的目录下
6、部署
打开“Java项目一键部署”,点击“添加项目”
填写“项目域名”,设置“项目路径”,填写“项目端口”
注:该端口须在菜单项“安全”的“防火墙中放行;如果是阿里云的ECS,也需要在阿里云的安全组中放行端口
7、解决浏览器刷新404的问题
由于“Java项目一键部署”用的tomcat,不是nginx,需要不一样的配置
(1)修改配置
“Java项目一键部署”对话框,菜单项“窗口配置文件”,添加Value,如下:
<Host autoDeploy="true" name="域名" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">
<Context crossContext="true" docBase="/www/wwwroot/站点目录/网站数据目录" path="" reloadable="true" >
<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Context>
</Host>
(2)添加rewrite.config文件
在项目下的WEB-INF文件夹(没有WEB-INF需要创建)中创建rewrite.config文件,文件内容如下:
#rewrite for tomcat
#内容解释 第一个规则是如果匹配到index.html文件不进行重写
RewriteRule ^/index\.html$ - [L]
#第二个规则,如果请求路径不是项目中的静态资源,跳转到 index.html 交给vue-router处理。
RewriteCond %{REQUEST_PATH} !-f
RewriteRule (.*) /index.html [L]
参考文章:https://my.oschina.net/u/1471354/blog/4277008
最新的方案请参考:https://blog.csdn.net/yjh4866/article/details/123716993
更多推荐
已为社区贡献4条内容
所有评论(0)