对于我来说,第一次接触前后端整合问题的小白,刚开始是一脸懵逼,这个问题整整坑了我一个晚上加一个早上,现在写出来总结;

前端开发: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的更多相关文章

  1. 使用node-static运行vue打包文件dist

    vue打包后的文件dist,如果想上线之前查看效果,方法如下: npm install -g node-static 进入到dist文件夹,运行static命令 打开上面地址

  2. 成功解决react+webpack打包文件过大的问题

    最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...

  3. webpack打包文件

    npm init -y//生成package.json npm install webpack webpack-cli --save-dev//安装webpack和webpack-cli根据入口文件. ...

  4. 规范开发目录 及 webpack多环境打包文件配置

    规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  5. webpack单独打包一个less文件

    需要将btn.less文件用webpack打包后,放到项目中.在网上百度了各种,遇到了很多问题,现在我将整个步骤整理如下: 1.建一个空的文件夹,命名为init_webpack,在该文件夹下运行: 这 ...

  6. webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  7. 3.使用webpack配置文件webpack.confg.js配置打包文件的入口和出口

    在项目根目录下新建webpack.config.js文件 webpack.config.js文件配置如下: // Node的路径操作使用的是path模块 const path=require('pat ...

  8. webpac4k运行webpack .\src\main.js .\dist\bundle.js打包出错

    打包的命令格式:webpack 要打包的文件的路径  打包好的输出文件的路径 运行webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: WARNING ...

  9. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

随机推荐

  1. CS窗体程序数据列表分页

    以前,觉得winform程序分页很无趣,也没实际意义,直到近期的项目实践中让我认识到原来winform数据列表分页也是非常有必要的,因为由于数据量过大的情况,当窗体在初始加载数据的时候如果不做条件的限 ...

  2. 11个优秀的Android开发开源项目

    一. 一个类似微信的时光轴效果   时光轴效果 项目地址 https://github.com/ljtyzhr/TimeLine 二. 安卓选择器类库,包括日期.时间.单项.双项选择器.城市地址选择器 ...

  3. Python函数篇(二)之递归函数、匿名函数及高阶函数

    1.全局变量和局部变量 一般定义在程序的最开始的变量称为函数变量,在子程序中定义的变量称为局部变量,可以简单的理解为,无缩进的为全局变量,有缩进的是局部变量,全局变量的作用域是整个程序,而局部变量的作 ...

  4. accept 文件描述符用尽处理

    if (events[i].data.fd == listenfd) { peerlen = sizeof(peeraddr); connfd = ::accept4(listenfd, (struc ...

  5. 【Win 10 应用开发】将墨迹保存到图像的两种方法

    IT界最近这几年,各种乱七八糟的东西不断出现,其中能用在实际工作与生活中的,大概也就那么几个.Web 前端也冒出各种框架,这就为那些喜欢乱用框架的公司提供了很好的机会,于是造成很多项目体积越来越庞大, ...

  6. MySQL 性能优化的最佳20多条经验分享(二)(转)

    11. 尽可能的使用 NOT NULL 除非你有一个很特别的原因去使用 NULL 值,你应该总是让你的字段保持 NOT NULL.这看起来好像有点争议,请往下看. 首先,问问你自己"Empt ...

  7. 微信原始demo

    有可能下载最新的demo下载不到这个原版的精简demo了. 这里为大家提供一下.以下代码为原始未改动代码   01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 ...

  8. Undefined index: HTTP_RAW_POST_DATA的解决办法

    $postStr = $GLOBALS["HTTP_RAW_POST_DATA"]; 替换为 $postStr = isset($GLOBALS['HTTP_RAW_POST_DA ...

  9. js 实现div模块的截图并下载功能(可制作长图)

    当需要实现html页面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多.多的不说,直接看代码首先我们需要引入2个js文件: <script type="text/ja ...

  10. macOS安装beego的使用bee命令出现killed:9 解决办法

    最近想搞一个restful api,发现go还是不错的,拿来研究下 beego文档:https://beego.me/quickstart 安装之后,执行bee命令,报错如下: 应该是最新mac OS ...