Vite学习教程 Vite+Vue2打包配置

文章目录

• 一、修改vite.config.js
• 二、配置文件资源@/路径提示
• 三、测试打包
• 参考文章
• 文章标签+摘要+封面图（可忽略）

一、修改vite.config.js

增加如下两个配置：

详细配置内容如下：

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'

// https://vitejs.dev/config/
export default defineConfig({
  base: './', // 打包的静态资源引用路径
  plugins: [vue2()], // 放插件用的
  resolve: {
    alias: {
      '@': '/src' // 配置@/提示符
    }
  },
})

---

二、配置文件资源@/路径提示

在一种我们已经配置了resolve.alias也就是路径别名配置。

应用场景：在src目录下创建assets目录文件夹

。

接着我们来在vue中进行使用：

<!-- 引入方式 -->
<img src="@/assets/image/logo.png" alt="">

成功访问。

---

三、测试打包

执行vite的打包命令：

npm run build:prod

打包效果：

成功访问：

---

参考文章

[1]. vue2/3解决项目打包后本地图片等资源找不到的问题]

文章标签+摘要+封面图（可忽略）

博客摘要： 本文介绍了如何通过修改vite.config.js来优化Vite项目的配置。首先，增加了基础路径和插件配置，使用defineConfig来定义项目配置，并通过vue2插件支持Vue 2。接着，配置了路径别名@指向/src，使得在项目中可以方便地引用资源。文章还展示了如何在Vue组件中使用路径别名来引入资源，并执行打包命令npm run build:prod来测试打包效果。最后，提供了参考文章链接，帮助读者解决项目打包后资源找不到的问题。

文章标签：

1. Vite配置
2. 资源管理
3. Vue项目打包

博客展示首图描述： 主标题：Vite项目配置 副标题：优化配置与资源管理 描述：掌握Vite配置技巧，提升项目打包效率和资源引用便利性。