vue-cli4.x打包白屏

在路由模式为history的情况下，需要在vue.config.js文件中配置公共路径(publicPath)，通常附带着配置输出文件目录(outputDir)和静态资源文件目录名称(assetsDir),相关代码如下：

 module.exports ={
 	//  '/dist/'表示打包后项目的名称
    publicPath:  process.env.NODE_ENV === 'production'? '/dist/': '/', // 公共路径(必须有的)
    outputDir: "dist", // 输出文件目录
    assetsDir: "static"//静态资源文件名称
    }

当然，在router的相关文件中，也要将mode设置为history,并设置base

const router = new VueRouter({
  mode: 'history',
  base: '/dist/',
  routes
})

后端配置，依照官方的说法, 我的Apache配置如下

在项目的更目录下，创建.htaccess文件，文件内容如下

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

项目目录下的文件

同时要更改apache的配置，在httpd.conf文件里，开启重写模块，也就是去掉

LoadModule rewrite_module modules/mod_rewrite.so前面的 #号
将对应的DocumentRoot中的 AllowOverride none 改为 AllowOverride All