博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue-cli —— 项目打包及一些注意事项
阅读量:6713 次
发布时间:2019-06-25

本文共 877 字,大约阅读时间需要 2 分钟。

打包方法:

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的方式引入。

转载于:https://www.cnblogs.com/FHC1994/p/10392498.html

你可能感兴趣的文章
notify与notifyAll的区别
查看>>
Java读取文件方法大全
查看>>
Java学习lesson 08
查看>>
MarkDown入门
查看>>
项目经理 与 敏捷开发
查看>>
安卓软件开发你知道需要学什么吗,看这里?
查看>>
必读的Python入门书籍,你都看过吗?(内有福利)
查看>>
alibaba.fastjson 乱序问题
查看>>
django 反向关联--blog.entry_set.all()查询
查看>>
网工之路
查看>>
linux 查看发行版本信息
查看>>
数据结构之二叉树遍历
查看>>
Linux rpm 命令参数使用详解[介绍和应用]
查看>>
tr的使用详解
查看>>
CentOS 6.4下PXE+Kickstart无人值守安装操作系统
查看>>
2.5 alias命令
查看>>
arp
查看>>
小博浅谈MVC
查看>>
前端技术学习之选择器(四)
查看>>
Ubuntu与windows的远程控制/远程桌面
查看>>