vite.config.ts常规配置（publicPath）

最新推荐文章于 2024-08-03 14:18:56 发布

shengzz

最新推荐文章于 2024-08-03 14:18:56 发布

阅读量1.7w

点赞数 24

文章标签：前端 javascript vue webpack

本文链接：https://blog.csdn.net/shengzz/article/details/129912887

版权

本文介绍了如何在 Vite 的配置文件 vite.config.ts 中将 `publicPath` 更改为 `base` 属性，以及详细配置过程，包括使用 `@vitejs/plugin-vue`、`unplugin-auto-import`、`unplugin-vue-components` 等插件，以实现 Vue 3 的组件按需引入和自动导入功能。同时，还详细展示了 Vite 的 build、server、proxy 等配置项，帮助开发者理解 Vite 的工作原理和最佳实践。

摘要由CSDN通过智能技术生成

@vue.confing.js中的publicPath属性变为base属性
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’ // 单文件组件支持
/**

Vue 3 单文件组件支持：@vitejs/plugin-vue
Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
Vue 2.7 支持：vitejs/vite-plugin-vue2
Vue <2.7 的支持：underfin/vite-plugin-vue2
/
import AutoImport from ‘unplugin-auto-import/vite’ // 使用后可以不手动引入ref reactive onMounted这些api
import Components from ‘unplugin-vue-components/vite’ // vite的按需引入自定义组件库
// import { ElementPlusResolver } from ‘unplugin-vue-components/resolvers’ // ElementPlus
import { NaiveUiResolver } from ‘unplugin-vue-components/resolvers’ // NaiveUi组件
import path from “path”; // 和NodeJS “path”模块一样
/*
自定义组件自动引入 unplugin-vue-components
element-plus 组件自动引入 unplugin-vue-components
vue3等插件 hooks 自动引入 unplugin-auto-import/vite
message, notification 等引入样式自动引入 vite-plugin-style-import
/
export default defineConfig({
// 需要用到的插件数组。Falsy 虚值的插件将被忽略，插件数组将被扁平化（flatten）
plugins: [
vue(),
AutoImport({
resolvers: [NaiveUiResolver()],
imports: [
“vue”,
{
“naive-ui”: [
“useD