返回 导航

Vue.js

hangge.com

Vue.js - vite.config.js文件常用配置解析（outDir、assetsDir、base、alias）

作者：hangge | 2026-03-25 08:46
    我在上一篇文章中演示了如何使用基于 Vite 的 create-vue 脚手架搭建 Vue.js 3 项目（点击查看）。与 Vue CLI 相同，create-vue 脚手架也提供了一些常用的配置，方便我们进行扩展和自定义。这些配置包括 outDir、assetsDir、alias、base 和 server 等。 需要注意的是，这些配置必须编写在项目根目录的 vite.config.js 文件中。下面我将对其中一些常用的配置进行介绍。

1，outDir

（1）outDir 选项用于指定打包输出的目录名称，默认为 dist。
提示：该配置与 vue.config.js 中的 outputDir 选项功能相同。

（2）下面配置我们指定了打包后生成目录的名称为 build，而不是默认的 dist。 
export default defineConfig({
  plugins: [vue(), vueJsx(), vueDevTools()],
  build: {
    outDir: 'build',
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

（3）重新执行 npm run build 命令进行打包后，会在项目的根目录下自动生成一个名为 build 的目录。

2，assetsDir

（1）assetsDir 用于指定静态资源存放的目录，默认为 assets。
提示：该配置与 vue.config.js 中的 assetsDir 功能相同。

（2）下面配置我们指定了静态资源存放的目录为 static。 
export default defineConfig({
  plugins: [vue(), vueJsx(), vueDevTools()],
  build: {
    assetsDir: 'static',
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

（3）重新执行 npm run build 命令进行打包后，可以发现静态资源将被存放在 static 目录中。

3，base

（1）base 用于指定开发或生产环境服务的公共基础路径，即指定引用资源的前缀。
提示：该配置与 vue.config.js 中的 publicPath 功能相同。

（2）下面配置我们指定开发或生产环境服务的公共基础路径为 /hangge/。
需要注意的是，base 属性还支持：
  • 绝对 URL 路径，如 /hangge/
  • 完整 URL，如 http://hy.com/
  • 用于 dev 环境的空字符串或 ./
export default defineConfig({
  base: '/hangge/',
  plugins: [vue(), vueJsx(), vueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

（3）重新执行一下 npm run build，再次打包该项目，可以发现生成的 index.html 文件中引用的资源路径都添加了前缀 /hangge/。 

（4）而执行 npm run dev 运行开发环境，本地启动的服务器也会多一个 /hangge/ 的基础路径。 

4，alias

（1）alias 用于为导包的路径设置别名。
提示：该配置与面 vue.config.js 中的 alias 功能相同。

（2）下面配置在 @ 别名的基础上又添加了个 components 别名： 
export default defineConfig({
  plugins: [vue(), vueJsx(), vueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      components: fileURLToPath(new URL('./src/components', import.meta.url)),
    },
  },
})

（3）接着，我们在 App.vue 根组件中可以分别使用 @ 和 components 别名导入 HelloWorld 组件。 
import HelloWorld from './components/HelloWorld.vue'
import HelloWorld from '@/components/HelloWorld.vue'
import HelloWorld from 'components/HelloWorld.vue'
评论

全部评论（0）

回到顶部