关于vue-cli3脚手架中静态资源引入问题

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对静态处理的三种方式，如果有帮助到你，可以点赞或留言评论，感谢各位。