Vite2+Vue2: 配置 Vite.config.js 添加资源路径前缀的妙招

2022-11-22 17:00:32

Vite2 + Vue2：巧妙配置 Vite.config.js，添加资源路径前缀

在 Vite2 和 Vue2 的强大组合中，添加资源路径前缀可以极大地提升开发效率。本文将详细阐述如何通过配置 Vite.config.js 实现这一操作，帮助你轻松解决资源引用路径混乱的问题。

添加资源路径前缀的必要性

资源路径前缀的作用在于为项目中的静态资源（如图片、样式表和脚本）添加统一的前缀，以增强代码可读性、维护性、效率和冲突避免能力。有了前缀，代码更易于理解和查找，提高了开发效率和可维护性。此外，前缀还能防止不同项目之间资源的冲突，确保正确引用。

配置 Vite.config.js 添加资源路径前缀

要添加资源路径前缀，只需在项目的根目录创建 Vite.config.js 文件，并添加以下配置：

export default {
  base: '/my-app/',
};

将资源文件（如图片、样式表和脚本）放置在项目的根目录或指定目录中，并在 HTML 代码中使用资源路径前缀引用它们：

<link rel="stylesheet" href="/my-app/style.css">
<script src="/my-app/script.js"></script>
<img src="/my-app/image.png">

使用 Vite 插件添加资源路径前缀

除了直接配置 Vite.config.js，还可以使用 Vite 插件来添加资源路径前缀：

vite-plugin-html-asset-transform： 自动为 HTML 中的资源引用添加前缀。
vite-plugin-rename-assets： 将资源文件重命名为带有资源路径前缀的新文件名。

代码示例

// 使用 vite-plugin-html-asset-transform 插件
import { defineConfig } from 'vite'
import htmlAssetTransform from 'vite-plugin-html-asset-transform'

export default defineConfig({
  plugins: [htmlAssetTransform()],
})

// 使用 vite-plugin-rename-assets 插件
import { defineConfig } from 'vite'
import renameAssets from 'vite-plugin-rename-assets'

export default defineConfig({
  plugins: [renameAssets()],
})