[微信小程序] -- wxss引用外部css文件及iconfont
小程序引入外部文件的方式是:只需要在其css文件写上: @import "外部css地址.wxss"; 因为项目需要, 小程序中需要使用iconfont , 很容易就想到了H5的引入方式:@font-
顺晟科技
2022-09-13 13:28:30
75
vue打包后js和css、图片不显示,引用的字体找不到问题;图片一般都是背景图片。
1、不使用mode:‘history’
2、使用mode:‘history’手动添加:
dist包不是服务器跟目录,在index.htm里手动给js和css添加dist目录即可/dist/;
3、或者使用mode:‘history’修改配置:
config里面的index.js找到env: require(\'./prod.env\')模块(新版本build: {),将下面的assetsPublicPath: \'/\' 改成assetsPublicPath: \'./\' 然后将dist放在服务器上就可以运行了,建议使用这种方法,灵活改动少
不出现的图片一般都是背景图片,打包后会发现图片css样式是 background-image: url(static/img/img@2x.c634efc.png) ,
加载路径是 http://域名/跟目录/static/css/static/img/img@2x.c634efc.png,
或者 http://域名/static/css/static/img/img@2x.c634efc.png
打开跟目录发现图片存放在 static/img下面,根本不在static/css/static/img下面所以加载图片失败。
解决办法:
需要单独为 css 配置 publicPath 。
ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath 。
对于用 vue-cli 生成的项目,dist 目录结构如下:
dist
├── index.html
└── static
├── css
├── img
└── js
用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。更改工程 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置,重新打包:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: \'../../\', // 这里是/static/css/static/img/img@2x.c634efc.png 所以跳出两层../../; 注意配置这一部分,根据目录结构***调整
fallback: \'vue-style-loader\'
})
} else {
return [\'vue-style-loader\'].concat(loaders)
}
加上 publicPath: \'../../\', 配置后重写打包即可。
13
2022-09
13
2022-09
13
2022-09
13
2022-09
13
2022-09
13
2022-09