vue生产环境配置跨域和history模式

一、配置伪静态

因为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一致。