Vue项目部署到非根目录

 

最近遇到一个需要把项目部署到公司的域名80端口下的子目录https://xxx.xxx.com/idolweb

搞了半天终于成功，特此记录下，共勉。

首先vue项目相关需要更改的地方

首先是config目录下的index.js

    assetsPublicPath: '/',

修改为

    assetsPublicPath: '/idolweb/'

注意：是 build 标签下的。

 然后是路由router下的index.js

添加base字段 值为子目录值

export default new Router({

mode: 'history',

base:'idolweb',

routes: [

{

}
])

 

服务器nginx配置

在目标的端口下添加如下配置

其中 alias 值为 vue打包后的项目目录路径

  location /idolweb{
            alias /usr/local/family/web;
            index index.html;
                 try_files $uri $uri/ /idolweb/index.html;
         }

至此 配置结束 可以成功访问