部属vue项目,访问路径设置非根,显示白屏的解决方案

下面是针对“部署Vue项目，访问路径设置非根，显示白屏的解决方案”的完整攻略：

问题描述

在部署Vue项目时，如果访问路径设置为非根路径，如/subpath，则在访问页面时会出现白屏或404的情况。

解决方案

1. 在vue.config.js中设置publicPath

在Vue项目的配置文件vue.config.js中，可以通过设置publicPath来指定访问路径。配置方法如下：

module.exports = {
  publicPath: '/subpath/',
}

通过以上配置，即可将访问路径修改为/subpath/，避免出现白屏或404的情况。

2. 修改服务器配置文件

如果项目是通过nginx、Apache等Web服务器来进行部署的，也可以通过修改服务器配置文件来实现修改访问路径的目的。

2.1 nginx配置

在nginx的配置文件中，可以通过以下配置来修改访问路径：

location /subpath/ {
  root /path/to/your/project;
  try_files $uri $uri/ /subpath/index.html;
}

其中，/path/to/your/project为Vue项目的部署路径。

2.2 Apache配置

在Apache的配置文件中，可以通过以下配置来修改访问路径：

<Directory /path/to/your/project>
  Options FollowSymLinks
  AllowOverride None
  Require all granted

  RewriteEngine On
  RewriteBase /subpath/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /subpath/index.html [L]
</Directory>

其中，/path/to/your/project为Vue项目的部署路径。

示例说明

示例1

假设Vue项目的访问路径为/admin，则可在vue.config.js中添加如下配置进行修正：

module.exports = {
  publicPath: '/admin/',
}

示例2

假设通过nginx部署服务，Vue项目的访问路径为/subpath，则可在nginx配置文件中添加如下配置进行修正：

location /subpath/ {
  root /path/to/your/project;
  try_files $uri $uri/ /subpath/index.html;
}

以上是针对“部署Vue项目，访问路径设置非根，显示白屏的解决方案”的完整攻略，希望对您有帮助。