修改vue的路由配置
1、修改router.js文件中的mode为history模式,并且设置好对应的base选项(部署时目录的名称)
export default new Router({ base: "/m/", mode: "history", routes: [] })
|
修改服务器配置文件
1、修改nginx服务器配置文件,找到站点对应的配置文件做如下修改
server { listen 80; server_name www.domain.com ; root "/www/wwwroot/xxx"; location / { index index.html index.htm index.php; if (!-e $request_filename){ rewrite ^(.*)$ /index.php?s=$1 last; break; } } location /m { try_files $uri $uri/ /m/index.html; } location ~ \.php(.*)$ { fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_split_path_info ^((?U).+\.php)(/?.+)$; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_param PATH_INFO $fastcgi_path_info; fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info; include fastcgi_params; } }
|
以上文件添加内容为:
location /m { try_files $uri $uri/ /m/index.html; }
|
1、修改apache服务器配置文件,打开站点根目录的.htaccess文件,添加以下内容
<IfModule mod_rewrite.c> RewriteEngine on RewriteBase / RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(m+.*)$ /m/index.html [L] </IfModule>
|
注:如果网站之前配置过伪静态,好像不能在之前的配置内容添加RewriteRule ^(m+.*)$ /m/index.html [L]
,需要在其原有内容上面添加上面一整块代码
还有一种方案,前端页面单独部署,绑定域名可以使用接口的域名但是要修改端口号,例如:接口域名:www.api.com,前端页面绑定域名:www.api.com:81,或者使用其他域名,这个时候需要配置接口域名所对应的程序的反向代理,配置如下:
apache:
<IfModule mod_proxy.c> ProxyRequests Off SSLProxyEngine on ProxyPass /m http://www.api.com:81/ ProxyPassReverse /m http://www.api.com:81/ </IfModule>
|
nginx:
location /m/ { proxy_pass http://www.api.com:81/; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }
|
然后将www.api.com/m代理到www.api.com:81,同时前端项目所在网站需要如下设置:
apache:
<IfModule mod_rewrite.c> RewriteEngine on RewriteBase / RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^(.*)$ /index.html [L] </IfModule>
|
nginx:
location /m { try_files $uri $uri/ /index.html; }
|
第二种方案相对第一种接口请求要慢不少,应为中间有个代理层,我估计如果在服务器内部将项目域名用host指向本地应该回合第一种速度差不多,毕竟代理直接就走内网了。
(完)