[JavaScript知识库]如何在宝塔上运行Vue工程

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