vue实战(2)——vue实战项目history模式下去#具体流程详解（一）

一、具体实现步骤

1. 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端口

2. 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端口的可用性。

3. 域名直接访问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模式就满足不了了，接下来会探索两者都能满足的方法

好看的皮囊千篇一律 有趣的灵魂贵在坚持

转载于:https://juejin.im/post/5b990b7d6fb9a05ce273ed3d