npm run build 打包后页面无法显示问题
今早运维小哥哥跑来找我,想给我的新项目发个版,我还是按照一般流程npm run build
然后git提交,打个tag v1.0.1
,运维小哥哥说你前端页面没写好嘛?
emmmm….老娘早就写好了。肯定是哪里出了问题,我打开一看果然有问题。
果然啥都没有。不用着急,先看下控制台报错。
就说XXXNOT FOUND,极有可能是路径问题。
闲话不多说,我先去试哈。
在config
文件夹下面有个index.js
,打开里面有个build
对象,assetsPublicPath
字段,本来是'/'
改成'./'
,再npm run build
,打开dist下面的index.html,果然成了。看来我猜的是对的。
but 我骄傲了么?我轻浮了么?并没有。回头仔细看下原理。
指令分析
package.json
文件里的
"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","build": "node build/build.js"}
这两条指令的意思:
- 运行
npm run dev
的时候执行的是build/dex-server.js
文件, - 运行
npm run build
的时候执行的是build/build.js
文件
build文件夹分析
build/dev-server.js
npm run dev 执行的文件build/dev-server.js文件,执行了:
- 检查node和npm版本
- 引入相关插件和配置
- 创建express服务器和webpack编译器
- 配置开发中间件(webpack-dev-middleware)和热重载中间件(webpack-hot-middleware)
- 挂载代理服务和中间件
- 配置静态资源
- 启动服务器监听特定窗口(8080)
- 自动打开浏览器并打开特定网址(localhost:8080)
说明:express服务器是提供静态文件服务,不过它还使用了http-proxy-middleware。一个http请求代理的中间件,前端开发过程中需要使用到后台的API的话,可以通过配置proxyTable来将相应的后台请求代理到专用的Api服务器。
build/webpack.base.conf.js
dev-server
依赖的webpack
配置是webpack.dev.conf.js文件,测试环境下使用的是webpack.base.conf.js
,webpack.dev.conf.js
中又引用了webpack.base.conf.js
,webpack.base.conf.js
主要完成了下面这些事情:
- 配置
webpack
编译入口 - 配置
webpack
输出路径和明明规则 - 配置模块
resolve
规则 - 配置不同类型模块的处理规则
这个配置里面只配置了.js 、.vue、图片、字体等几类文件的处理规则额,如果需要处理器她文件可以在module.rules
里面配置。
build/webpack.dev.conf.js
在webpack.base.conf.js
的基础上增加完善了开发环境下面的配置,主要包括下面几件事情:
- 将
hot-reload
相关的代码添加到entry chunkd
- 合并基础的webpack配置
- 使用styleLoaders
- 配置Source Maps
- 配置webpack操作
build/check-versions.js和build/dev-client.js
最后是build文件夹下面两个比较简单的文件,
dev-client.js似乎没有使用到,代码也比较简单。
check-version.js完成对node和npm的版本检测。
build/utils.js和build/vue-loader.conf.js
webpack
配置文件中使用到了utils.js
和vue-loader
这两个文件,utils主要完成下面三件事:
- 配置静态资源路径
- 生成cssloaders用于加载.vue文件中的样式
- 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件
vue-loader.conf则只配置了css加载器以及编译css之后自动添加前缀。
build/build.js
构建环境下的配置,build.js主要完成下面几件事:
- loading动画
- 删除创建目标文件夹
- webpack编译
- 输出信息
build/webpack.prod.conf.js
构建的时候用到的webpack配置来自webpack.prod.conf.js,该配置同样是在webpack.base.conf基础上的进一步完善。主要完成下面几件事情:
- 合并基础的webpack配置
- 使用styleLoaders
- 配置webpack的输出
- 配置webpack插件
- gzip模式下的webpack插件配置
- webpack-bundle分析
说明: webpack插件里面多了丑化压缩代码以及抽离css文件等插件。
config文件夹分析
config/index.js
config文件夹下最主要的文件就是index.js了,在这里面描述了开发和构建两种环境下的配置,前面的build文件夹下也有不少文件引用了index.js里面的配置。
config/dev.env.js、config/prod.env.js和config/test.env.js
这三个文件就简单设置了环境变量而已,没什么特别的。这是webpack的基本入门,webpack还有很多插件,还需要去探索。后面写这几个文件的源码解释。
文章参考 https://www.cnblogs.com/hl0203/p/7138600.html
npm run build 打包后页面无法显示问题相关推荐
- vue-cli脚手架npm run build打包后图片路径问题 2018.11.21
2018/11/21 最近在自己尝试做一个vue的项目,发现了一个打包以后出现的路径问题 使用npm run dev 可以正常打开项目,图片路径不会出错,使用脚手架npm run build 打包以后 ...
- vue2.0项目部署到服务器_vue项目运行npm run build打包后如何发布到服务器?
运行npm run build后,怎么发布到服务器? 这样就打包成功了.然后我的项目根目录就会多一个dist文件夹,里面包含static文件夹(存放img.css.js等文件)和index.html. ...
- npm run build 打包后,如何运行在本地查看效果
目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...
- 解决:vue项目npm run build 打包后 :src路径里面的本地图片找不到。
问题描述及错误代码: // 本地运行.打包 图片是ok的 <img src="../../static/images/orderSeeProgress0.png"> / ...
- vue项目使用 npm run build 打包后出现样式错乱问题解决方法
检查组件内的 标签是不是没有加scoped 不加scoped打包后容易引起样式错乱 正确规范应该这样 scoped 作用style样式只在本组件内有效,防止别组件类名 或标签一样样式冲突.
- npm run build 打包爬坑记(1)
npm run build 打包爬坑记 先说说打包过程,npm run build 后放入phpstudy里面,访问本地ip,查看phpstudy的端口号,就能访问页面了(访问地址:http://19 ...
- npm run build 打包报错primordials is not defined的解决方法
npm run build 打包报错primordials is not defined的解决方法 D:\uniapp项目\huishua_web_agent>npm run build> ...
- vue项目执行npm run build 打包出现某些图片,字体,资源文件路径404,无法加载的问题
如图所示: 如果出现如图的错误.首先我们第一步是考虑进入dist文件夹里面的static文件夹 正常情况下static文件夹是非常干净的 如果你发现你的static文件夹出现了多余的img.fonts ...
- yarn build 和 npm run build打包有什么区别
yarn build 和 npm run build打包有什么区别 结论: 没区别,yarn build === yarn run build === npm run build
最新文章
- html表单的创建和css的构成
- 深入理解PHP原理之变量(Variables inside PHP)
- python3 判断列表是否存在某元素
- struts1 几种Action父类的比较
- BZOJ 3489: A simple rmq problem(K-D Tree)
- lamp/lnmp实例
- 魔性十足的数学动态图,这种东西都拿出来分享?
- Codeforces Round #700 (Div. 1) C. Continuous City 构造 + 二进制
- 错误: 在类中找不到 main 方法, 请将 main 方法定义为:public static void main(String[] args)否则 JavaFX 应用程序类必须扩展javafx.ap
- 项目alpha冲刺-总结
- oracle中的mount,Oracle环境中使用NFS的mount选项
- amoeba安装与简单使用(一)
- 高清人脸数据集汇总 (主要用于人脸生成、分割任务)
- 【电源模块】TPS54331 DCDC降压芯片设计
- c++ 获取文件夹文件并排序
- html 鼠标单击显示div,3.1.2 利用鼠标单击实现DIV的选取
- 苹果手机支持鸿蒙,除了苹果,这四款华为也能三年不卡,还能升级鸿蒙
- html 怎么获取焦点的位置,jQuery怎么获取焦点?
- 卡尔曼滤波简介(转载)
- 简述工业机器人示教再现的一般步骤_工业机器人示教与初识编程语言
热门文章
- 基于SpringBoot+Vue的动漫漫画投稿网站 element
- 成为优秀沟通者的要素_如果您想成为更好的设计师,请成为更好的沟通者
- jboss jpa 配置使用
- 【机器学习】L1正则化和L2正则化
- iviewui中表格控件中render的使用示例
- vue中使用iview UI
- c语言为什么除法会四舍五入,C语言学习(2)
- 运用 Python 爬取私募基金信息_Scrapy
- Photoshop调整图像色彩
- 硬盘出现问题后会对计算机造成哪些影响,浅析win7系统电脑造成硬盘坏道的原因以及影响...