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">
和背景background: 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
有~前缀的路径。 ~被认为是一个模块请求,同require('some-module/image.png')
。根路径,比如/assets/log.png
在JavaScript得到资源路径
computed: { background () { return require('./bgs/' + this.id + '.jpg') } }
这个资源路径同样会被file-loader处理然后返回处理后的路径。而且Webpack会一次性加载该bgs目录下的所有图片。
“真实的”静态资源
与此相对的,static/中的文件全都不会被Webpack处理。它们将被直接拷贝到目标文件夹,引用这些文件需要使用绝对路径。
总结
以上所述是小编给大家介绍的vue-cli与webpack处理静态资源的方法及webpack打包的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
您可能感兴趣的文章:
- 详解vue-cli + webpack 多页面实例配置优化方法
- 详解webpack+vue-cli项目打包技巧
- vue-cli webpack 开发环境跨域详解
- windows下vue-cli及webpack搭建安装环境
- 详解用vue-cli来搭建vue项目和webpack
- vue-cli+webpack记事本项目创建
- vue-cli的webpack模板项目配置文件分析
相关推荐
-
windows下vue-cli及webpack搭建安装环境
1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm
-
vue-cli的webpack模板项目配置文件分析
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser
-
vue-cli webpack 开发环境跨域详解
edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying 为了解决跨域问题, 通常会使用Jsonp,但是jsonp只能是get请求. 或者使用CORS支持,设置Access-Control-Allow-Origin: * 0 前置技能 熟悉vue-loader 和 webpack 1 基本配置 编辑confix/index.js文件 dev
-
详解vue-cli + webpack 多页面实例配置优化方法
本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,
-
vue-cli+webpack记事本项目创建
vue-cli+webpack记事本项目使用的是vue-cli2.0里面的项目构建工具webpack 项目的准备工作: 1.了解vue2.0 2.了解一些ES6 3.储备一些webpack知识 参照项目地址:vue2.0构建单页应用最佳实战 我们将会选择使用一些vue周边的库 vue-cli , vue-router , vue-resource , vuex 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resourc
-
详解用vue-cli来搭建vue项目和webpack
vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-simple projectName 第三步:把文件切换到初始化的项目中 cd projectName 第四步:安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装,这样快很多 cnpm install 第五步:运行 npm run dev 完成一个初始化vue项目 webpack 要开
-
详解webpack+vue-cli项目打包技巧
1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,打包后文件体积可以减少百分之八十!!!!!!! 2.如何实现打包文件中js.css等的版本控制? 设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串 以上就是本文的全部内容,希望对
-
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/a
-
webpack实现静态资源缓存的方法
目录 引言 区分一下几种不同的hash hash chunkhash contenthash 实现js缓存 CommonsChunkPlugin不正确用法 引起问题的原因 实现css的缓存 实现图片/字体的缓存 参考 引言 静态资源缓存是前端性能优化的一个点,所以在前端开发过程中,一般会最大限度的利用缓存(这里主要是强缓存).回到本文主题,在使用webpack构建的项目中,稍有不慎的话,即使服务器设置了缓存策略,可能构建的项目无法实现静态资源缓存.那么webpack怎样才能达到使用缓存的效果呢,
-
在SpringBoot中静态资源访问方法
一.概述 springboot 默认静态资源访问的路径为:/static 或 /public 或 /resources 或 /META-INF/resources 这样的地址都必须定义在src/main/resources目录文件中,这样可以达到在项目启动时候可以自动加载为项目静态地址目录到classpath下 ,静态访问地址其实是使用 ResourceHttpRequestHandler 核心处理器加载到WebMvcConfigurerAdapter进行对addResourceHandlers
-
linux服务器上使用nginx访问本地静态资源的方法
1.查看80端口是否被占用,一般80端口多被apache服务占用. netstat -anp|grep 80 2.修改apache服务的端口号 vim /etc/apache2/ports.conf 3.将端口号修改为8080 4.修改nginx服务配置 vim /etc/nginx/conf.d/nginx.conf 5.重启nginx服务 service nginx restart 6.页面尝试访问本地资源 7.访问成功! 总结 以上所述是小编给大家介绍的linux服务器上使用nginx访问
-
基于Springboot2.3访问本地路径下静态资源的方法(解决报错:Not allowed to load local resource)
最近在做的一个项目中有一个比较奇葩的需求: 要在springboot中,上传本地的图片进行展示 我的第一反应是,直接在数据库字段加一个存储本地路径的字段,然后用thymeleaf的th:src渲染到前端就好了嘛! 理想很丰满,但现实却很骨感~ 前端报了这样的错误Not allowed to load local resource 于是我想到了可以使用IO将图片先上传到static/images目录下,这样就不会出现禁止访问本地路径的问题了 但是这样实现,问题又来了:上传后的图片必须重启sprin
-
nginx实现发布静态资源的方法
步骤 将准备好的静态资源文件放在指定文件夹 更改nginx的配置文件:nginx.conf 启动nginx服务:start nginx (一定要切换到nginx的目录下) 在浏览器中检查是否发布成功 实际操作 把所发布的静态网页放入指定文件夹: 更改nginx的配置文件: nginx.conf配置内容如下: #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice;
-
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com
-
Yii2 加载css、js 载静态资源的方法
应用场景 Yii2提供了AppAsset类管理静态资源,在使用Yii2 布局模板时,如果想在某个页面内部写一段js 并且在页面底部,如果直接使用 script 标签是不可以的. 使用AppAsset类管理静态资源 打开assetsAppAsset.php,定义 addJs(),addCss() 分别用于在静态页面引入外部js.css 文件 1.修改AppAsset.php文件代码 namespace backend\assets; use yii\web\AssetBundle; /** * @
-
spring boot 静态资源处理方法
spring boot 秉承约定优于配置,spring boot在静态资源的处理上就已经默认做了处理. 1.默认资源映射 映射"/**"的路径到 /static (或/public./resources./META-INF/resources), "/webjars/** 映射到 classpath:/META-INF/resources/webjars/ 复制代码 代码如下: <script type="text/javascript" src=&
-
SpringMVC访问静态资源的方法
在SpringMVC中常用的就是Controller与View.但是我们常常会需要访问静态资源,如html,js,css,image等. 默认的访问的URL都会被DispatcherServlet所拦截,但是我们希望静态资源可以直接访问.该肿么办呢? 在配置文件:web.xml可以看到: <!-- Processes application requests --> <servlet> <servlet-name>appServlet</servlet-name&
随机推荐
- Response.Flush的使用心得
- asp之GetArray提取链接地址,以$Array$分隔的代码
- Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
- Dreamweaver CS3集成Spry效果图文教程
- js 正则使用方法
- Java函数式编程(八):字符串及方法引用
- IOS中手风琴表不能移动的解决方法
- js获取对象、数组的实际长度,元素实际个数的实现代码
- js 调用本地exe的例子(支持IE内核的浏览器)
- 一个替换目录结构的正则表达式 实现目录的增加
- Go语言实现Fibonacci数列的方法
- 利用mysql的inet_aton()和inet_ntoa()函数存储IP地址的方法分享
- 详解mysql建立索引的使用办法及优缺点分析
- JavaScript获取表单内所有元素值的方法
- 深入理解jquery的$.extend()、$.fn和$.fn.extend()
- 微信小程序 省市区选择器实例详解(附源码下载)
- java实现静默安装apk
- Java使用RandomAccessFile类对文件进行读写
- IOS 出现问题POST网络请求状态code:500的解决方法
- Javascript控制页面链接在新窗口打开具体方法