Vue项目npm run build后vue-router失效，WAMP部署空白页求助

兄弟，我看你这情况是典型的开发环境和生产环境路径不匹配加上history模式路由需要服务器支持导致的，别慌，一步步来就能搞定：

1. 先修正Webpack的资源路径配置 #

你的webpack.config.js里output.publicPath设成了/dist/，这是根目录下的路径，但你部署在localhost/project_name这个子目录里，服务器会去localhost/dist/找资源，肯定找不到啊！

修改webpack.config.js里的output部分：

output: {
    path: path.resolve(__dirname, './dist'),
    // 推荐用相对路径，适配任意子目录；也可以硬编码对应你的项目路径
    publicPath: './dist/', 
    // 硬编码写法：publicPath: '/project_name/dist/'
    filename: 'build.js'
},

2. 配置Vue Router的base路径 #

如果你用了Vue Router的history模式（默认是带#的hash模式），必须给路由配置base选项，对应你的子目录：
找到你的路由配置文件（一般是src/router/index.js），修改如下：

import Vue from 'vue'
import Router from 'vue-router'
// 导入你的组件...

Vue.use(Router)

export default new Router({
  mode: 'history', // 若用hash模式可省略，但history模式必须配置
  base: '/project_name/', // 填写你的项目子目录名称
  routes: [
    // 你的路由规则...
  ]
})

就算是hash模式，配置base也能让路由路径更规范，建议加上。

3. 给WAMP配置URL重写（针对history模式） #

用history模式时，直接访问子路由（比如localhost/project_name/about）会触发Apache的404错误——因为服务器找不到这个物理文件，得让所有请求都转发到index.html。

在你的WAMP项目根目录（www/project_name）创建一个.htaccess文件，写入以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /project_name/
  RewriteRule ^index\.html$ - [L]
  # 如果请求的不是真实文件/目录，就转发到index.html
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /project_name/index.html [L]
</IfModule>

还要确保WAMP的Apache开启了rewrite模块：打开WAMP管理器，依次点击Apache -> Apache Modules -> rewrite_module，勾选后重启Apache服务。

4. 重新部署验证 #

• 重新执行npm run build构建项目
• 把dist文件夹和根目录的index.html一起复制到WAMP的www/project_name目录下（确保index.html在project_name根目录，dist和它同级）
• 访问localhost/project_name试试，页面和路由应该都能正常工作了！

额外排查点 #

如果还是有问题，打开浏览器F12查看：

• Network标签：检查build.js等资源的请求路径是否正确，出现404就是publicPath配置有误
• Console标签：查看是否有组件加载失败、路由配置错误等报错信息

内容的提问来源于stack exchange，提问作者Sandip Nag