webpack打包后的文件夹是空的_VUE使用Webpack打包路径问题

使用Webpack进行项目打包，容易出现引用资源路径错误问题。总结一下

一、webpack打包指令

npm run build

二、webpack打包后生成dist文件,将dist文件夹中的文件，放在服务器上

1、如果页面空白，报错资源的引用路径不对

解决：找到 config > index.js

build: {

index: path.resolve(__dirname, '../dist/index.html'),

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',

// assetsPublicPath: '/',

// 在/前边+ .

assetsPublicPath: './',

}

2、如果图片不显示

图片路径实例：

在src > assets > img > index.jpg 放置图片

在src > components > home > Home.vue 引用

.home-bg

background-image: url("../../assets/img/index.jpg")

打包生成文件后，图片加载路径会出问题。

解决：找到 build > utils.js

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader',

publicPath: '../../'

// 添加publicPath: '../../'

})

} else {

return ['vue-style-loader'].concat(loaders)

}

三、再次打包

—-end——

PS：引用图片路径很长，可以通过设置引用路径，来简写代码。比如：

background-image: url("~assets/img/index.jpg")