部属Vue项目访问路径设置非根显示白屏怎么解决

在部署Vue项目时，如果访问路径不是根路径（例如/app），可能会出现白屏问题。这种情况通常是由于Vue项目的路由配置或Web服务器配置不当导致的。本文将详细介绍如何解决这个问题。

1. 检查Vue路由配置

首先，确保Vue项目的路由配置正确。在Vue项目中，路由配置通常在src/router/index.js文件中。如果项目部署在非根路径下，需要在路由配置中设置base属性。

const router = new VueRouter({
  mode: 'history',
  base: '/app/', // 设置基础路径
  routes: [
    // 路由配置
  ]
})

base属性指定了应用的基础路径。例如，如果应用部署在/app路径下，base应设置为/app/。

2. 配置Web服务器

如果Vue项目部署在非根路径下，还需要配置Web服务器以确保所有请求都能正确路由到Vue应用。

2.1 Nginx配置

如果你使用的是Nginx作为Web服务器，可以在Nginx配置文件中添加以下配置：

server {
  listen 80;
  server_name yourdomain.com;

  location /app/ {
    alias /path/to/your/vue/dist/;
    try_files $uri $uri/ /app/index.html;
  }
}

• location /app/：指定应用的访问路径。
• alias /path/to/your/vue/dist/：指定Vue项目打包后的静态文件路径。
• try_files $uri $uri/ /app/index.html：确保所有请求都指向index.html，以便Vue路由可以处理。

2.2 Apache配置

如果你使用的是Apache作为Web服务器，可以在.htaccess文件中添加以下配置：

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

• RewriteBase /app/：指定应用的基础路径。
• RewriteRule . /app/index.html [L]：确保所有请求都指向index.html。

3. 检查静态资源路径

如果Vue项目中的静态资源路径不正确，也可能导致白屏问题。确保在vue.config.js中正确配置了publicPath：

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

publicPath指定了静态资源的基础路径。在开发环境中，通常设置为/，而在生产环境中，应根据部署路径进行设置。

4. 重新构建并部署

完成上述配置后，重新构建Vue项目并部署到服务器：

npm run build

然后将生成的dist目录中的文件上传到服务器，并确保Web服务器配置正确。

5. 测试访问

最后，通过浏览器访问应用的非根路径（例如http://yourdomain.com/app/），确保应用能够正常加载，不再出现白屏问题。

总结

部署Vue项目到非根路径时，出现白屏问题通常是由于路由配置、Web服务器配置或静态资源路径设置不当导致的。通过正确配置Vue路由、Web服务器以及静态资源路径，可以有效解决这一问题。希望本文的解决方案能够帮助你顺利部署Vue项目。