vue-cli中 assetsPublicPath, assetsSubDirectory的区别

一.  webpack配置代码：

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './projectName' // 相对路径

上述代码的含义：

assetsRoot : 在当前目录的上一级 的 dist目录下输出资源文件

assetsSubDirectory: 把所有的静态资源打包到 dist下的 static文件夹下

assetsPublicPath :代表生成的index.html文件，里面引入资源时，路径前面要加上 ./projectName/,也就是assetsPublicPath的值，即在index.html代码中引用静态文件：

<script type="text/javascript" src="./projectName/static/js/app.js"></script>

如果要是把资源放在https://www.baidu.com/projectName目录下面，可以这样配置

assetsPublicPath: './'

如果使用的是histroy 模式，使用相对路径报错，可以这样配置成绝对路径

assetsPublicPath: '/projectName/'

二.vue部署后白屏问题解决办法

　　1）如果是hash模式没问题，history模式不行会有刷新白屏问题，需要后端配置下nginx 全覆盖的情况 

　　location / {

　　　　try_files   $uri $uri/  /index.html;

　　}

  　2)  history模式下，二级路由刷新报错  us< 这种问题

　　将webpack.prod.conf.js 文件中的 的publicPath 改成 ‘/’ 绝对路径就可以了

 

注意： 在hash模式下，一般static和index如果放在根目录下（非特殊情况），直接output: {publicPath: './'}，即： publicPath 都带点，assetsPublcPath 也是

　　　在history模式下， 一般static和index如果放在根目录下（非特殊情况），直接output: {publicPath: '/'}，即： publicPath 都不带点，assetsPublcPath 也是