• 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 /***';

    
    
    
  • 相关阅读:
    ubuntu安装
    k8s 安装
    Blazor 路由
    ISO 8601
    Centos 8使用devstack快速安装openstack最新版
    使用devstack 一键安装 openstack详细过程和遇到的坑
    蓝瑟66000公里保养
    释放rsyslog占用的Linux内存
    Netty4.1 Http开发入门(一)服务端
    网络传输中的帧和payload
  • 原文地址:https://www.cnblogs.com/Yoriluo/p/7000291.html
Copyright © 2020-2023  润新知