一、配置伪静态
因为vue单页面应用只有index页面,所以服务器无法正常跳转页面,需要先配置伪静态,让所有的请求找不到页面时可以回到index页面。代码如下:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
二、配置反向代理
因为前后端分离存在跨域问题,在vue.config.js中配置跨域只能解决开发环境跨域问题,所以生产环境需要在服务器上进行配置,如下为apache配置反向代理代码:
<IfModule mod_proxy.c>
ProxyRequests Off
SSLProxyEngine on
ProxyPass /pc http://yhtest.b612.top/
ProxyPassReverse /pc http://yhtest.b612.top/
</IfModule>
- ProxyPass第一个配置项为服务器地址对应的别名,我这里是/pc,一般为/api,需要和前端代码中使用的请求接口baseURL一致。