express整合webpack的打包文件dist
对于我来说,第一次接触前后端整合问题的小白,刚开始是一脸懵逼,这个问题整整坑了我一个晚上加一个早上,现在写出来总结;
前端开发:vue-cli+webpack;
后台开发:nodejs框架express;
前端开发之后,使用localhost能正确访问vue-cli自带的服务器。
而在后台方面,一开始我是直接在expres的views和public上开发前端页面,因此在一些配置方面都是上个项目的,现在整合新项目,让我有点方。
过程:
1、进入前端目录,npm run build 命令直接将前端项目打包成dist文件;
2、我是直接将dist文件复制到服务器的根目录;
3、更改routes文件夹下的index文件,将路由访问'/'改成渲染dist文件下的index.html;
结果:访问服务器,静态资源404;
二次改进过程:(经过大量的查资料)
1、找到vue-cli项目下的config文件夹下的index.js文件,找到build部分的assetsPublicPath;(接下来会说一下assetsPublicPath的作用)
2、将assetsPublicPath更改为'http://localhost:5777/dist';
3、整合到express服务器上
结果:
src="http://localhost:5777/dist/static/js/manifest.0d43cb9e3c7036b97742.js"
这个时候我就懵逼了,这不就是正确的路径吗?
可是还是404,这就尴尬了。
乱入一下assetsPublicPath知识点:
看了一下官方文档,蹩脚英语的我又懵逼了,我说一下大致意思,assetsPublicPath可以指定输出文件的公共地址在浏览器的引用。
首先,webpack在打包的时候已经为你写好了dist文件中静态资源的引用,也就是'./static/js|css/***',也就是客户端访问dist可以加载静态资源。
但当dist部署到express上的时候,访问服务器时候,静态资源的url为:assetsPublicPath + './static/js | css/ ***';
也就是上面代码所表示的。
可为什么还是404呢?这就关乎到express的问题了。
在app.js的配置中,有这样一行代码:
app.use(express.static(path.join(__dirname, '/dist'))); (默认为/public)
这句话的意思是设置express访问静态资源的目录,也就是express需要访问静态文件时都是从public入口。
所以第二种情况的地址实际上访问的是 src="http://localhost:5777/dist/dist/static/js/manifest.0d43cb9e3c7036b97742.js"
也就是assetsPublicPath中的localhost:5777和express.static中的dist重复了。
总结来说:只需要将assetsPublicPath改为 'localhost:5777' + express.static的 '/dist' + 前端默认路径 '/static/js |css /***';
express整合webpack的打包文件dist的更多相关文章
- 使用node-static运行vue打包文件dist
vue打包后的文件dist,如果想上线之前查看效果,方法如下: npm install -g node-static 进入到dist文件夹,运行static命令 打开上面地址
- 成功解决react+webpack打包文件过大的问题
最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...
- webpack打包文件
npm init -y//生成package.json npm install webpack webpack-cli --save-dev//安装webpack和webpack-cli根据入口文件. ...
- 规范开发目录 及 webpack多环境打包文件配置
规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...
- webpack单独打包一个less文件
需要将btn.less文件用webpack打包后,放到项目中.在网上百度了各种,遇到了很多问题,现在我将整个步骤整理如下: 1.建一个空的文件夹,命名为init_webpack,在该文件夹下运行: 这 ...
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
- 3.使用webpack配置文件webpack.confg.js配置打包文件的入口和出口
在项目根目录下新建webpack.config.js文件 webpack.config.js文件配置如下: // Node的路径操作使用的是path模块 const path=require('pat ...
- webpac4k运行webpack .\src\main.js .\dist\bundle.js打包出错
打包的命令格式:webpack 要打包的文件的路径 打包好的输出文件的路径 运行webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: WARNING ...
- webpack提取图片文件打包压缩
抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...
随机推荐
- CS窗体程序数据列表分页
以前,觉得winform程序分页很无趣,也没实际意义,直到近期的项目实践中让我认识到原来winform数据列表分页也是非常有必要的,因为由于数据量过大的情况,当窗体在初始加载数据的时候如果不做条件的限 ...
- 11个优秀的Android开发开源项目
一. 一个类似微信的时光轴效果 时光轴效果 项目地址 https://github.com/ljtyzhr/TimeLine 二. 安卓选择器类库,包括日期.时间.单项.双项选择器.城市地址选择器 ...
- Python函数篇(二)之递归函数、匿名函数及高阶函数
1.全局变量和局部变量 一般定义在程序的最开始的变量称为函数变量,在子程序中定义的变量称为局部变量,可以简单的理解为,无缩进的为全局变量,有缩进的是局部变量,全局变量的作用域是整个程序,而局部变量的作 ...
- accept 文件描述符用尽处理
if (events[i].data.fd == listenfd) { peerlen = sizeof(peeraddr); connfd = ::accept4(listenfd, (struc ...
- 【Win 10 应用开发】将墨迹保存到图像的两种方法
IT界最近这几年,各种乱七八糟的东西不断出现,其中能用在实际工作与生活中的,大概也就那么几个.Web 前端也冒出各种框架,这就为那些喜欢乱用框架的公司提供了很好的机会,于是造成很多项目体积越来越庞大, ...
- MySQL 性能优化的最佳20多条经验分享(二)(转)
11. 尽可能的使用 NOT NULL 除非你有一个很特别的原因去使用 NULL 值,你应该总是让你的字段保持 NOT NULL.这看起来好像有点争议,请往下看. 首先,问问你自己"Empt ...
- 微信原始demo
有可能下载最新的demo下载不到这个原版的精简demo了. 这里为大家提供一下.以下代码为原始未改动代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 ...
- Undefined index: HTTP_RAW_POST_DATA的解决办法
$postStr = $GLOBALS["HTTP_RAW_POST_DATA"]; 替换为 $postStr = isset($GLOBALS['HTTP_RAW_POST_DA ...
- js 实现div模块的截图并下载功能(可制作长图)
当需要实现html页面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多.多的不说,直接看代码首先我们需要引入2个js文件: <script type="text/ja ...
- macOS安装beego的使用bee命令出现killed:9 解决办法
最近想搞一个restful api,发现go还是不错的,拿来研究下 beego文档:https://beego.me/quickstart 安装之后,执行bee命令,报错如下: 应该是最新mac OS ...