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更改为'localhost:5777/dist';
3、整合到express服务器上
结果：
src="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）
webpack打包流程 面试这句话的意思是设置express访问静态资源的⽬录，也就是express需要访问静态⽂件时都是从public⼊⼝。
所以第⼆种情况的地址实际上访问的是  src="localhost:5777/dist/dist/static/js/manifest.0d43cb9e3c7036b97742.js"　
也就是assetsPublicPath中的localhost:5777和express.static中的dist重复了。
总结来说：只需要将assetsPublicPath改为 'localhost:5777' + express.static的 '/dist' + 前端默认路径 '/static/js |css /***';

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。