本文主要分为两部分,一个是介绍vue-cli3下的webpack配置,一个是如何将外部字体文件引入进来。
全部代码见
Alfxjx/skeleton-vue-testgithub.com这个demo里面还测试了lazy-load
演示地址:
skeleton-testalfxjx.github.io求个star, 么么哒skeleton-test求个star, 么么哒
webpack 配置
Vue-cli3相比于cli2,大大简化了webpack的配置,这是一件好事,也给我带来了一些困扰,比如目前的网上的教程基本都是基于cli2的,很少有关于cli3的,在引入字体的时候,使用assetsPath
方法就会报错。
我的解决方法是这样的:设置一个utils
对象,手动添加工具函数。
// vue.config.js
const utils = {
assetsPath: function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
// 生产环境下的 static 路径
? 'static'
// 开发环境下的 static 路径
: 'static'
return path.posix.join(assetsSubDirectory, _path)
},
resolve: function(dir) {
return path.join(__dirname, '..', dir)
}
}
这样一来就方便添加字体以及骨架屏(skeleton)了。
如何引入字体文件(ttf...)
我的方案是这样的:
- 首先把字体文件(.ttf之类的)放在
src/common/font/
下; - 接着在font文件夹里面新建一个
font.css
: - 在文件夹里面放好字体文件(Avinda.ttf)
@font-face{
font-family: "avinda";
// 路径为绝对路径
src: url('Avinda.ttf')
}
- 在
vue.config.js
按照这样配置:
module.exports = {
configureWebpack:{
plugins:[...],
module:{
rules:[
{
test:/.(woff2?|eot|ttf|otf)(?.*)$/,
loader:'url-loader',
options:{
limit: 10000,
name: utils.assetsPath('fonrs/[name].[hash:7].[ext]')
}
}
]
},
}
}
这样就成功了。
骨架屏
骨架屏选择的是这个vue-skeleton-webpack-plugin,使用方法见对应的项目地址,但是这样做了之后,运行npm run serve
的时候,会出现错误:
Entry module not found: Error: Can't resolve 'I:workspacevuesrcentry-skeleton.js' in 'I:workspacevueskeleton-test':
Error: Can't resolve 'I:workspacevuesrcentry-skeleton.js' in 'I:workspacevueskeleton-test'
检查了一下是路径有问题。
修改方法:
// in vue.config.js configureWebpack :{}
plugins: [
new SkeletonWebpackPlugin({
webpackConfig: {
entry: {
// 地址的解析是从根目录开始的。需要加上/skeleton-test/(项目名称)
app: utils.resolve('./skeleton-test/src/entry-skeleton.js')
}
}
})
],
全部代码见Github,这个demo里面还测试了lazy-load
求个star, 么么哒