vue-cli —— 项目打包及一些注意事项
打包方法:
1.把绝对路径改为相对路径:打开config/index.js 会看到一个build属性,这里就是我们打包的基本配置了。在这里可以修改打包的目录,打包的文件名。最重要的是一定要把绝对目录改为相对目录。即:把 assetsPublicPath:'/' 改为 assetsPublicPath:'./'
2.在当前工程文件下使用命令:npm run build 进行打包。
注意事项:
1.打包结束后,如果要直接在本地打开(即直接打开生成的dist文件下的index.html即可),可以在 npm run build
完成之后,执行命令:npm install -g http-server // 该命令只需执行一次, 安装过之后, 以后就不需要重复安装了。
2.直接打开生成的dist文件下的index.html时,可能会发现该界面的图片都没有加载出来,这是因为图片引用路径出错了。比如,我是把图片资源放在static文件夹下了,那么图片引用时必须使用相对路径,而不能使用绝对路径(npm run dev命令,对于绝对路径和相对路径都没问题;npm run build命令,只能是相对路径)。
错误的示例:
正确的示例:
3.图片引用时,是有区别的,如果是静态加载(template/style下),直接用相对地址即可,如果是动态加载(script下),则需要 require('相对地址') 才能成功(import也可以的)!
静态加载:
动态加载:
4.import和require区别(参考网上):
5.assets文件夹与static文件夹的区别
区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中。
区别二:assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用,在script下必须用@import的方式引入。
vue-cli —— 项目打包及一些注意事项的更多相关文章
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- vue cli 3 打包过大问题
vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...
- Vue Cli 3 打包上线 静态资源404问题解决方案
报错原因:静态资源丢失 解决方案 官方文档https://cli.vuejs.org/zh/config/#vue-config-js baseUrl 从 Vue CLI 3.3 起已弃用,请使用pu ...
- 将vue的项目打包后通过百度的BAE发布到网上的流程
经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. ...
- @vue/cli 3 打包文件读取绝对路径处理
@vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- vue.js项目打包上线
最近一直坚持每个月写一个小的vue.js 开发的项目,最后开发完成后想到很久之前给别人回答的一个问题:vue的项目如何上线,当时有千奇百怪的回答,我在想,这些人都是肿了么,vue的官方都说了,这个框架 ...
- vue之项目打包部署到服务器
这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...
- vue.js 项目打包
vuejs是个前端框架,npm run dev的目的在于前端开发的时候可以实时调试.所以npm run dev 只是开发时期会用到,在生产环境中我们应该使用nginx,apahce tomcat等应用 ...
随机推荐
- 解析Json文件
一: /** * 把json文件读取到内存中 * * @throws IOException */ public String getFile(String filePath) throws IOEx ...
- larave异步多图片上传的实现和注意事项及$file的对象函数
要使用多图片上传,首先要在input添加multipart,同时注意name的参数要加[],不然,不算是数组.具体如下,注意绿色地方.如果是单张图片,把[]去掉,不要multiple; <inp ...
- margin-bottom在safari浏览器失效的问题
今天遇到一个bug是底部明明有margin-bottom却无法作用,排查了一下改成用padding可以有效 但不找出原因是无法完成这篇博客的 问题概要描述:在safari中,当内容高度超出所有父容器时 ...
- es7 async/await使用
先创建一个promise对象,里面执行一个异步函数 function fetchUser() { return new Promise((resolve, reject) => { fetch( ...
- Nginx的upstream反向代理、负载均衡详解
这篇文章的前提是已经配置好了NGINX,而且tomcat已经配置好了,而且能能够访问了. 说反向代理之前,我们先看看正向代理,正向代理也是大家最常接触的到的代理模式. 正向代理最大的特点是客户端非常明 ...
- mongodb 性能
mongo 性能:http://www.mongoing.com/docs/tutorial/optimize-query-performance-with-indexes-and-projectio ...
- Delphi 2010 新增功能之: IOUtils 单元(6): TPath(结构体) 的方法与属性
以后路径相关的处理, 用 IOUtils.TPath 就很方便了. //较常用的方法: TPath.GetTempPath; {获取临时文件夹路径} TPath.Ge ...
- 2018年年度总结 & 2019年计划
2018关键词 「探索」 引用以前作文最爱写的开头,时间如白驹过隙,回想上次写17年年度总结,仿佛也就过了几日光景. 首先回顾一下17年定下的目标, 18年我将关键字设为探索,目的有两个,一是 ...
- Elasticsearch学习笔记(十一)Mapping原理
一.Mapping的功能作用 Mapping是定义如何存储和索引一个document及其所包含字段的过程. Mapping是index和type的元数据,每个type都有自己的一个mapping,决定 ...
- WAN口和LAN 口有什么区别
WAN口不能够用来连接电脑. LAN(1.2.3.4)口只能够用来连接电脑. 拓展资料 路由器(Router),是连接因特网中各局域网.广域网的设备,它会根据信道的情况自动选择和设定路由,以最佳路径, ...