一、具体实现步骤
- nginx.conf配置
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://localhost:8000;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
说明：以上是nginx.conf下nginx配置，由于前期把项目都放在8000端口下了，因为要去端口访问，于是就在80端口映射到了8000端口
- 8000端口下nginx配置
server {
listen 8000;
server_name localhost;
location / {
root /usr/project/;
try_files $uri $uri/ /index.html; #配合vue项目的history模式去除#时用到
index index.html;
client_max_body_size 8m;
}
location /active {
root /usr/project/activeww/;
#try_files $uri $uri/ /index.html;
try_files $uri $uri/ /activeww/index.html;
index index.html;
}
#根目录下项目调用接口配置
location /api {
proxy_pass http://localhost:8788/;
}
#二级目录下项目调用接口配置
location /active/api {
proxy_pass http://localhost:8788/;
}
}
说明：以上配置可以满足域名下以及项目去#正常访问，二级目录下项目都能正常访问，但是没法使用二级目录下的vue项目的history模式。另外将默认80端口强制映射到8000端口，这样加大了对8000端口的依赖性，而减少了默认80端口的可用性。
- 域名直接访问vue项目的history的前端配置文件修改
(1) vue项目目录下config/index.js
build: {
assetsPublicPath: '/'
}
(2) index.html中引用的外部文件“/static/css/xxx.css”
<link rel="shortcut icon" href="/static/images/favicon.ico">
<script type="text/javascript" src="/static/js/sha1.js" ></script>
<link rel="stylesheet" type="text/css" href="/static/css/swiper-3.3.1.min.css" />
(3) router下增加mode为history模式
export default new Router({
mode: 'history',
routes: [{
path:'/',
name:'Navigation',
component:Navigation
}]
})
总结：以上便是实现域名下vue项目history模式的全过程，如果哪位小伙伴有更好的方法，欢迎指导！
疑惑：虽然上面的方法能解决一级域名下的history问题，当二级目录下也要实现history模式就满足不了了，接下来会探索两者都能满足的方法 * _ *
*******************好看的皮囊千篇一律 > ^ _ ^ < 有趣的灵魂贵在坚持*******************
