Vue 如何打包纯前端静态资源项目

背景

在企数保项目开发前期,由于项目紧急,需要先做一个独立于后端的纯前端演示项目,即不依赖于后端打包纯前端静态资源。现有的项目代码和打包配置,需要基于以上需求进行修改,本文章是对修改过程中遇到的问题进行记录和总结。

解决方案

修改 VueRouter 的路由模式为默认的 hash 模式

修改 src/router/index.js 文件,把 mode: 'history' 这一行注释掉就行


file

修改 Webpack 打包配置

修改 build/index.js 文件,把 build 对象下的 assetsPublicPath 的值由 '/' 改为 './'


file

修改代码中图片的引入方式为相对路径

首先,所有引入图片资源的地方,都改为相对路径方式引入,包括 CSS 样式、Style 样式


file

其次,由于 CSS 内容在打包之后会输出到另一个文件夹,导致代码里写的相对路径和实际打包后的相对路径对不上,所以要修改对应的打包配置


file

最终效果

file

参考

  1. Vue实现打包后直接访问
  2. 三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
  3. vue 打包后 static 中图片路径不对的问题
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容