vue-cli中理不清的assetsSubDirectory 和 assetsPublicPath
时间:2019-04-18
本文章向大家介绍vue-cli中理不清的assetsSubDirectory 和 assetsPublicPath,主要包括vue-cli中理不清的assetsSubDirectory 和 assetsPublicPath使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
背景
一般情况下,我们借用 vue-cli之力安装好所有依赖后,我们就可以愉快的板砖了。但是也经常会遇到一写问题,比如
assetsSubDirectory
和assetsPublicPath
两个兄弟有时候把我搞得死去活来的,下午刚好有点空,我就去好好修理了他俩一会儿(其实是被修理)。经过无数次的,config/index.js
里面的build
配置,然后无数次的npm run build
,鄙人得出了以下之间,如有异议,还请多多指教。
基本的意义
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
复制代码
index
: 模板assetRoot
: 打包后文件要存放的路径assetsSubDirectory
: 除了 index.html 之外的静态资源要存放的路径,assetsPublicPath
: 代表打包后,index.html里面引用资源的的相对地址
经过无数次修改配置 和 build后的 见解
index: path.resolve(__dirname, '../dist/index.html'),// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: './assets/',
assetsPublicPath: './hello/',
打包后为
<script type="text/javascript" src="./hello/assets/js/manifest.js"></script>
<script type="text/javascript" src="./hello/assets/js/vendor.js"></script>
<script type="text/javascript" src="./hello/assets/js/app.js"></script>
复制代码
以上的意义是
assetsRoot
: 在当前目录的上一级 的dist
目录下输出资源文件assetsSubDirectory
: 把所有的静态资源打包到dist
下的assets
文件夹下assetsPublicPath
:代表生成的index.html
文件,里面引入资源时,路径前面要加上./hello/
,也就是assetsPublicPath的值
``
由此可见 ,我们可以直接 设置 assetsPublicPath
为绝对路径,比如自己的线上路径前缀, https://www.yourdomain.com/
,则打包后的路径,全部会加上这个 前缀,如果配置package.json的一些参数,就可以放心的把自己html里面的内容复制出来,放在任何地方都可以用了(前提是资源要先上线哦)
作者:特立独爬的蜗牛
链接:https://juejin.im/post/5bd9838df265da393c06033a
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浙大版《C语言程序设计(第3版)》题目集 练习2-9 整数四则运算
- 浙大版《C语言程序设计(第3版)》题目集 练习2-10 计算分段函数[1]
- 浙大版《C语言程序设计(第3版)》题目集 练习2-11 计算分段函数[2]
- SAP Spartacus产品页面的normalizer
- Nodejs中使用net-snmp库读取智慧站房的温湿度、空调等实时数据
- 生气!面试官你过来,我给你手写一个Spring Aop实现!
- 浙大版《C语言程序设计(第3版)》题目集 练习2-12 输出华氏-摄氏温度转换表
- Linux下文本处理“三剑客”
- Thread和goroutine两种方式实现共享变量按序输出
- 浙大版《C语言程序设计(第3版)》题目集 练习2-13 求N分之一序列前N项和
- 浙大版《C语言程序设计(第3版)》题目集 练习2-14 求奇数分之一序列前N项和
- dotnet 双缓存数据结构设计 下载库的文件写入缓存框架
- 浙大版《C语言程序设计(第3版)》题目集 练习2-15 求简单交错序列前N项和
- 浙大版《C语言程序设计(第3版)》题目集 练习2-17 生成3的乘方表
- WPF 漂亮的现代化控件 新 ModernWPF 界面库