关于javascript:Vue-如何打包纯前端静态资源项目

37次阅读

共计 469 个字符,预计需要花费 2 分钟才能阅读完成。

背景

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

解决方案

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

批改 src/router/index.js 文件,把 mode: ‘history’ 这一行正文掉就行

批改 Webpack 打包配置

批改 build/index.js 文件,把 build 对象下的 assetsPublicPath 的值由 ‘/’ 改为 ‘./’

批改代码中图片的引入形式为相对路径

首先,所有引入图片资源的中央,都改为相对路径形式引入,包含 CSS 款式、Style 款式

其次,因为 CSS 内容在打包之后会输入到另一个文件夹,导致代码里写的相对路径和理论打包后的相对路径对不上,所以要批改对应的打包配置

最终成果

参考

  1. Vue 实现打包后间接拜访
  2. 三种计划解决 Vue 我的项目打包后 dist 中的 index.html 用浏览器无奈间接关上的问题
  3. vue 打包后 static 中图片门路不对的问题
正文完
 0