关于vue-cli3脚手架中静态资源引入问题
1.在入口html文件中使用把静态资源放在public下,此目录下资源都是不经过编译处理的,不要放置有es6的js文件常规导入<script src="js/iconfont.js" type="text/javascript"></script>目录结构发现控制台报以下错误此时我们要在导入地址前面加上<%= BASE_URL %...
·
1.在入口html文件中使用
把静态资源放在public下,此目录下资源都是不经过编译处理的,不要放置有es6的js文件
常规导入
<script src="js/iconfont.js" type="text/javascript"></script>
目录结构
发现控制台报以下错误
此时我们要在导入地址前面加上<%= BASE_URL %>
<script src="<%= BASE_URL %>js/iconfont.js" type="text/javascript"></script>
结果正常显示
2.在vue文件的模板中使用静态资源
首先配置vue.config.js API文档
2.1配置publicPath
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/',
上面代码意思是判断是否为开发环境
如果设置了项目名
可以加在/后面,此方法同时也解决了打包资源后路径出错的问题
2.2配置VUE全局变量
Vue.prototype.$publicPath = process.env.BASE_URL
在项目中使用
<img :src="$publicPath+'img/1.jpg'"/>
也可以在组件中定义变量单独使用,如下
publicPath: process.env.BASE_URL,
//在data函数中return
3.在CSS中使用
因为 sass 文件中无法获取环境变量或 webpack 内的配置,于是最直接的方法就是自定义一个变量,然后在每个需要使用到它的文件引用它。
$publicPath: "/";
.icon-test {
background: url($baseUrl + 'imgs/icon_test.png') no-repeat;
}
这样设置的问题在于开发环境和生产环境的的publicPath不同,每次打包项目都要修改css中的publicPath,解决方法如下:
打开vue.config.js,设置以下代码
const baseUrl = process.env.NODE_ENV === 'production' ? './' : '/';
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
prependData: `$publicPath: "${baseUrl}";`
}
}
},
}
设置完成后,可以直接在项目中使用publicPath
以上就是vue-cli3对静态处理的三种方式,如果有帮助到你,可以点赞或留言评论,感谢各位。
更多推荐
已为社区贡献1条内容
所有评论(0)