一个域名对应多个 Vue history 模式项目的 nginx 配置

Posted on | In

需求

如：
www.xxx.com/music
www.xxx.com/blog
类似这种，一个域名对应多个 Vue 项目

Vue 项目配置

vue-router 中配置

为了在 url 中不要 # ，可以使用路由的 history 模式，参考官方文档
配置 base ，参考官方文档

1
2
3
4
5
const router = new VueRouter({
  mode: 'history',
  base: '/music/',
  routes: [...]
})

webpack 的配置

1
2
3
4
5
6
build: {
  index: path.resolve(__dirname, '../music/index.html'),
  assetsRoot: path.resolve(__dirname, '../music'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/music/'
}

然后将打包后得到的文件放到 nginx 配置的 root 目录下（如：/www/vue/music, /www/vue/blog）

nginx 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
    listen     80;
    servername xxx.com;
    root       /www/vue;
    
    location /music {
        try_files $uri $uri/ /music/index.html;
    }
    
    location /blog {
        try_files $uri $uri/ /blog/index.html;
    }
}

修改 nginx 配置之后重启下 nginx 服务器就行了。