vue-cli+webpack打包后引用js及css的路径错误、背景图片的引用路径问题及favcion.ico默认不打包问题汇总

打包后引用js及css文件路径错误

默认情况下,通过vuecli+webpack打包的css、js等资源,路径都是绝对的。当部署到牵涉路径的项目中时,绝对路径的引用就会出现问题。
因为默认是把配置的static文件夹当作了根路径,因需要修改引用为相对路径。

方法一
build > webpack.prod.conf.js文件的 output 对象中增加一行

1
publicPath: './',

方法二
修改config > index.js文件build对象的assetsPublicPath属性

1
assetsPublicPath: './',

css中背景图片的路径引用问题

css中引用的背景图片是通过css加载的,如 background: url(“./assets/img/logo.png”);被相对打包后变成了url(static/css/static/img/logo.505c344.png),因此我们要保留css引用图片的正常路径,达到这样的效果:

1
url(../../static/img/logo.505c344.png)

1、查找build > utils.js文件中的以下代码位置:

1
2
3
4
5
6
7
8
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}

2、在 fallback 下添加一行:

1
2
//上一行的别忘了逗号
publicPath: '../../'

3、最终如此:

1
2
3
4
5
6
7
8
9
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}

然后重新打包项目即可。

favcion.ico默认不打包问题

build > webpack.prod.conf.js文件内查找new CopyWebpackPlugin,添加以下内容:

1
2
3
4
5
//路径根据自己实际情况
{
from: './src/assets/img/favicon.ico',
to: config.build.assetsRoot
}

最终如此:

1
2
3
4
5
6
7
8
9
10
11
12
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
},
{
from: './src/assets/img/favicon.ico',
to: config.build.assetsRoot
}
])

然后配置根目录下.html文件,修改icon路径为:

1
<link rel="shortcut icon" href="./favicon.ico" />

最后打包后的favicon.ico是打包在根目录下与.html文件同级。