说在前面的话：
Vue router有两种模式，默认的模式是hash，就是地址栏中有一个#来隔开域名和pathname。而这种方式一般在部署前后端分离项目时并不需要特殊的设定，可以这么说，项目打包后，直接放到nginx下就可以运行。
而history模式则不然，vue官方在介绍history模式时，告知这种模式需要一些配置或者需要后端来支持，所以我们看一下如何配置吧。
第一种 一个域名，多个项目
这里我要说的项目满足下面几个条件：
1、前后端分离项目
2、前端项目部署在nginx下，切nginx下为一个域名 多个项目。什么意思呢，就是你们的项目是像这样访问的：
www.test.com/project1
www.test.com/project2
www.test.com/project3
3、需要Vue-cli 3，请不要把vue的版本和vue-cli的版本混淆。
4、项目中已经有了router相关的依赖，就是在创建项目时，安装了vue-router。
假设我们的项目打包目录是abc，在nginx下需要通过www.test.com/abc这样访问,项目的主页为 www.test.com/abc/home
先配置router.js ，添加下面内容：
mode: 'history',
base: '/abc/'
然后在routes里添加下面内容
{ path: '/', redirect:'/home'},
第一步是保证项目是history模式和访问的路径，第二部是当用户访问域名时，如果没有加router路径，直接跳转到主页。
配置完成后大概是这样的
image.png
接下来配置vue.config.js
module.exports = { publicPath: '/abc/', outputDir: 'abc', // baseUrl:'/abc/',}
这里要注意的是，publicPath和baseUrl不能同时存在，vue官方建议使用publicPath代替baseUrl
到这里，vue的配置就完成了。
接下来配置nginx
打开nginx的conf文件 并在 server中添加下面内容
location /abc {
index index.html index.htm;
try_files $uri $uri/ /abc/index.html;
}
修改完后记得重启nginx命令为
/nginx目录/nginx -t
/nginx目录/nginx -s reload
这时候尝试下面几个操作
访问:www.test.com/abc 看看是否跳转到www.test.com/abc/home 是则成功，不是则配置有问题。
切换项目的页面，看看是否有502 404 500的现象，资源是否加载正常，是则成功，不是则配置有问题。
访问nginx上的其它项目，看看静态资源文件是否被刚才的配置影响，未影响则成功，影响则配置有问题。
第二种 一个域名只有一个项目，访问域名就等于访问项目
项目满足下面几个条件：
1、前后端分离项目
2、前端项目部署在nginx下，切nginx下只有一个项目，意思是nginx的root 路径就是项目路径，可以通过域名直接访问项目。
3、需要Vue-cli 3，请不要把vue的版本和vue-cli的版本混淆。
4、项目中已经有了router相关的依赖，就是在创建项目时，安装了vue-router。
router.js
参考第一种配置方法中的内容，将base修改为'/'，修改后如代码：
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
// base: process.env.BASE_URL,
// base: '/abc/',
base: '/',
routes: [
{
path: '/',
redirect:'/home'
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
vue.config.js 参考第一种配置方法中的代码，修改publicPath为'/'，修改后代码如下：
module.exports = {
// publicPath: '/abc/',
// outputDir: 'abc',
publicPath: '/',
outputDir: 'abc',
}
nginx配置如下，配置location
location / {
root e:\workgit\abc; #项目在服务器上的真实路径
#error_page 405 =200 http://$host:8085/$request_uri;
index index.html index.htm;
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.*)$ /index.html last;
}
有些项目可能是部署在Apache、Tomcat、IIS下的，请另寻解决方案。
如果有其它问题可以留言。
网友评论