缘起缘何
-
来自qq群友的疑问
Paste_Image.png -
来自微信群友的疑问
Paste_Image.png
这之前的几个月已经看到不少这样类似的问题
原因
2个原因导致了出现这样问题 小伙伴迷惑
1⃣️对构建模版不了解 这里我们采用大家普遍用的webpack模版
2⃣️对路径访问不了解
run build 后
少年咬了一口凉皮先生家的香酥饼
啪啪啪行云流水般的在控制台敲下npm run build
就着满屏绿色 少年一手抓起嘉禾一品的豆浆 一手直奔dist目录
双击index.html 一口豆浆差点毁了他贷款买的mac
👦少年毫不犹豫拿起卫生纸……噢不，是毫不犹豫的切到qq vue搅基群:
send:为什么在根目录直接打开是个空页面呢?😳
少年手给老衲，我领你慢慢看～❤️
1⃣️看一下你的地址栏
2⃣️看控制台
3⃣️看你文件中资源地址
4⃣️看你构建的配置路径
ps:之前模版是这样滴
Paste_Image.png
怎么样，少年，看过之后有没有顿悟？
👦少年："嗯，这是咋回事？"
老衲:-_-#
<b>必然会出错</b>，在构建模版的配置文件config.js中有<b>assetsRoot,assetsSubDirectory和assetsPublicPath</b>这三个路径配置项
assetsRoot:构建输出目录 也就是构建后的东西都扔这里
assetsSubDirectory:资源子目录 除了index.html，其余的js img css都分在这里
assetsPublicPath:项目目录 一个杠杠 啥意思呢，是根目录的意思
所以不难理解 如果按照上面的配置构建出来 一运行的意思就是
“以当前根目录为项目目录，访问static/js/app.js”
换成你直接打开的结果 翻译下就睡
"以file:///为项目目录,访问static/js/app.js"
file:///static/js/app.js能有吗？肯定没有
ps:file:///为文件系统访问协议的一种
👦我不管，我就要这么访问，我就双击打开！任性！
两种方法
1⃣️把static文件夹扔到你的file:///根目录不就完了
来我们双击打开
果然有了
👦少年很高兴:“行了，这就中了，我去找老板说研究明白了”
"少侠留步！你这么去了 工作不保！！"
2⃣️好一些的方法是
assetsPublicPath:'./' //或者为空 ''
👦少年：你这……啥意思？
老衲：别急 你build下再试试 老衲先去把上面恶心方式挪动的文件夹删了……
必须好使
👦少年：这这～老道你给我讲讲 咋加个点就对了？
老衲：(这孩子悟性真够操蛋的凸-凸)
👀下我们构建后的入口html
根据构建配置assetsPublicPath资源路径前都变为./ 那么翻译过来就是
"以当前目录为项目目录 访问static/js/app.js" 在咱们这个例子中对应的就是
"以file:///Users/xxx/Documents/projects/outsourcing/youreact/dist/ 为项目目录 访问static/js/app.js"
有吗？ 当然有 🆒
一般的项目上线后 为了访问加速 可放在cdn上 这个项目目录就可以配置为cdn地址，构建工具会帮你把引用资源的路径处理为cdn路径，只需构建完 上传到cdn即可
why
首先要说的是 ./ ../ /
<b>/ 取根目录:</b>
file:///
<b>./ 取当前目录: </b>
file:///Users/xxx/Documents/projects/outsourcing/youreact/dist/
<b>../ 取当前目录的上一层目录: </b>
file:///Users/xxx/Documents/projects/outsourcing/youreact/
其次要说的是run dev 开发模式，为了方便调试 dev指令启动了一个node-express的http私服 并且应用了webpack-dev-middleware中间件
这哥们的介绍语第一句就是
No files are written to disk, it handle the files in memory
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
看见publicPath这句了吧
👦：老道你真棒～
老衲：八戒 耙子拿好 跟上
