我的解决方法是这样的:设置一个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]')
}
}
]
},
}
}
这样就成功了。
使用
<style>
@import url('../../common/font/font.css');
.activaty-keyword-box {
position: absolute;
left: 30px;
top: 310px;
font-size: 25px;
writing-mode: vertical-rl;
font-family: avinda;
}
</style>