详解Vue项目编译后部署在非网站根目录的解决方案

下面详解Vue项目编译后部署在非网站根目录的解决方案：

在Vue项目中通过webpack编译后生成的静态页面都在dist目录下，如果要部署在项目根目录下，只需将dist目录下的文件全部复制到项目根目录即可。但有些情况下需要将Vue项目部署到非网站根目录下，这时候需要做一些额外的配置。

下面介绍两种解决方案：

方案1：使用publicPath配置项

在Vue项目的webpack配置文件中，可以添加publicPath配置项，将打包后的静态资源的路径以及静态资源请求的路径前缀都修改为非网站根目录下的路径。

具体操作方法如下：

1. 打开项目根目录下的vue.config.js文件
2. 在该文件中的module.exports中添加如下配置项：

module.exports = {
publicPath: 'your_public_path_here',
// other configuration items...
}
上面的your_public_path_here需要替换为实际要部署在的路径，如/your_dir/或者./your_dir/等。

1. 在终端中使用npm run build命令打包，打包后生成的静态资源路径和请求路径都会添加上your_public_path_here前缀。

2. 将dist目录中的内容上传到网站根目录下的your_dir文件夹中即可。

示例说明：

如果将Vue项目部署到http://www.example.com/vue/目录下：

1. 修改项目根目录下的vue.config.js文件，添加如下配置项：

module.exports = {
publicPath: '/vue/',
// other configuration items...
}

1. 执行npm run build打包后，将dist目录中的所有文件复制到网站目录下的vue文件夹中即可。

方案2：使用nginx反向代理

如果不想修改Vue项目的webpack配置文件，可以通过nginx的反向代理功能来实现将Vue项目的静态资源代理到非网站根目录下的路径中。

具体操作流程如下：

1. 在nginx的配置文件中添加如下代码：

location /your_dir/ {
alias /path/to/your/vue-project/dist/;
index index.html;
}

上面的your_dir需要替换为实际要部署的路径，/path/to/your/vue-project/dist/是Vue项目打包后的静态资源目录。

1. 将Vue项目打包后的静态资源全部放在/path/to/your/vue-project/dist/目录下。（注意：该目录需要nginx的用户权限访问）

2. 重启nginx服务，访问http://www.example.com/your_dir/即可访问Vue项目。

示例说明：

假设Vue项目已经打包到/path/to/your/vue-project/dist/目录下，要将Vue项目部署到http://www.example.com/vue/目录下：

1. 修改nginx的配置文件，在http模块内添加如下代码：

server {
...
location /vue/ {
alias /path/to/your/vue-project/dist/;
index index.html;
}
...
}

1. 保存配置文件后重启nginx服务，访问http://www.example.com/vue/即可访问Vue项目。

以上就是Vue项目编译后部署在非网站根目录的解决方案的完整攻略了，希望对你有帮助。