更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置:
1
2
3
4
5
6
7
8
9
|
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../' , // 注意配置这一部分,根据目录结构自由调整 fallback: 'vue-style-loader' }) } else { return [ 'vue-style-loader' ].concat(loaders) } |
补充知识:webpack打包运行vue项目后找不到.ttf及.woff文件,或者路径报错
webpack.base.config 文件中 ,有的人可能在utils.js中
修改前:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
{ test: /\.css$/, use: ExtractTextPlugin.extract({ use: [‘css-loader?minimize‘, ‘autoprefixer-loader‘], fallback: ‘style-loader‘ }) }, { test: /\.less$/, use: ExtractTextPlugin.extract({ use: [‘css-loader?minimize‘,‘autoprefixer-loader‘, ‘less-loader‘], fallback: ‘style-loader‘ }), }, |
修改后:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
{ test: /\.css$/, use: ExtractTextPlugin.extract({ use: [‘css-loader?minimize‘, ‘autoprefixer-loader‘], publicPath:‘../../‘, fallback: ‘style-loader‘ }) }, { test: /\.less$/, use: ExtractTextPlugin.extract({ use: [‘css-loader?minimize‘,‘autoprefixer-loader‘, ‘less-loader‘], publicPath:‘../../‘, fallback: ‘style-loader‘ }), }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader' , options: { limit: 10000, name: utils.assetsPath( 'fonts/[name].[hash:7].[ext]' ) } } |
针对ttf/woff结尾的文件使用url-loader加载的,要寻找到加载样式的loader改变打包路径。
就是再加载css的时候,将publicPath路径更改为“../../”,也根据自己的目录结构自定义。这样打包后的项目才能找到相对应的应用路径,为什么要这样改呢,是因为我们的路径要按照打包后的层级结构去找,不是按原本项目本身,还有一点相对路径有时候找不到,所以才要改成这种绝对路径,在static下再去寻找次。
以上这篇vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/cifangling/article/details/81866548