vue项目部署到非根目录下的问题及解决

当我们要将Vue项目部署到非根目录下，例如部署到http://www.example.com/project/这个目录下时，需要进行一些特定的配置，以保证网站正常运行。下面详细介绍如何进行配置。

1. 修改vue.config.js配置文件

在vue.config.js文件中，增加以下代码：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/project/'
    : '/'
}

其中，publicPath即为前端资源的根路径。在部署到非根目录时，需要将其设置为'/project/'，其中project为你所指定的目录名。

2. 修改路由配置

在路由的JS文件中，需要将每个路由的路径前加上/project/，以保证路由正确。

例如原来的路由配置为：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

修改后的路由配置为：

const routes = [
  { path: '/project/', component: Home },
  { path: '/project/about', component: About }
]

示例1：部署到Github Pages上

如需将Vue项目部署到Github Pages上，在Github Pages的设置中，需要将Custom Domain设置为你的Github Pages地址 + 目录名。

例如你的Github Pages地址为https://username.github.io/，目录名为project，那么Custom Domain应设置为https://username.github.io/project/，并在vue.config.js文件中将publicPath设置为'/project/'。

示例2：部署到Nginx服务器上

如需将Vue项目部署到Nginx服务器上，需要在Nginx的配置文件中进行如下设置：

location /project {
    alias /your/project/path;
    try_files $uri $uri/ /project/index.html;
}

其中/project为你所指定的目录名，/your/project/path为实际项目所在路径。

此时，将publicPath设置为'/project/'即可正常运行网站。

以上就是Vue项目部署到非根目录下的问题及解决方法，根据实际情况进行适当的修改即可。