vue-cli+webpack处理静态资源及webpack打包步骤详解
- php中世界最好的语言原创
- 2018-05-21 13:47:121592浏览
这次给大家带来vue-cli+webpack处理静态资源及webpack打包步骤详解，vue-cli+webpack处理静态资源及webpack打包的注意事项有哪些，下面就是实战案例，一起来看一下。
通过Vue-cli进行webpack打包的坑
Vue-cli为Vue项目搭建的脚手架的确很方便，但打包时容易出现空白页，或者对应的静态资源加载不了。
我是通过将项目/config下的index.js的assetsPublicPath变成'./'，变成相对路径，进行解决。
cd vue demo npm run dev //运行程序 npm run bulid //webpack打包
处理静态资源
你也许会注意到vue-cli与webpack结合的项目中，我们通常会有两个静态资源的路径：src/assets和static/，他们两者的区别是什么呢？本文主要和大家介绍了vue-cli与webpack结合如何处理静态资源，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
打包的资源
为了回答这个问题，我们首先要明白Webpack是如何处理静态资源的。在*.vue组件里，所有的templates和CSS模块都被vue-html-loader和css-loader解析来查找路径URL。
举个例子，在<img src"./logo.png">和背景<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>: url(./logo.png)，”./logo.png”是一个相对路径，会被Webpack当做一个依赖加载。
但是因为logo.png并不是JavaScript，所以如果被当成一个依赖的花，我们需要通过url-loader和file-loader来解析它。这个模板已经为你配置了相应的loader，所以你通常不用担心相对路径的部署问题。
即使这些资源有可能在构建过程中被内联/拷贝/重命名，他们也是源码重要组成部分。这就是为什么我们建议单独在/src文件夹里放置静态资源，如同其他的资源文件夹。
事实上，你都不必把他们全放在/src/assets，你可以根据模块/组件来组织利用他们。比如说，你可以把任一组件放到他们自己的目录，并在该目录下存放静态资源。
资源引入规则
相对路径，比如 ./assets/logo.png会被解析成模块依赖。它们会被一个基于你Webpack输出配置的自动生成URL替代。
没有前缀的路径，比如assets/logo.png，同相对路径，转义成./assets/logo.png
有~前缀的路径。 ~被认为是一个模块请求，同<a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>('some-module/image.png')。根路径，比如/assets/log.png
在JavaScript得到资源路径
computed: {
background () {
return require('./bgs/' + this.id + '.jpg')
}
}
这个资源路径同样会被file-loader处理然后返回处理后的路径。而且Webpack会一次性加载该bgs目录下的所有图片。
“真实的”静态资源
与此相对的，static/中的文件全都不会被Webpack处理。它们将被直接拷贝到目标文件夹，引用这些文件需要使用绝对路径。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是vue-cli+webpack处理静态资源及webpack打包步骤详解的详细内容。更多信息请关注PHP中文网其他相关文章！