使用vite从头搭建一个vue3项目（三）vite.config.js配置

已于 2024-04-17 21:46:46 修改
阅读量1.3k 收藏 20
点赞数 21
分类专栏： vite # Vue 文章标签： vue3 vite3 vite.config.js
于 2024-04-17 17:22:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ThisEqualThis/article/details/137812238
版权
Vue 同时被 2 个专栏收录
25 篇文章 2 订阅
订阅专栏
vite
7 篇文章 0 订阅
订阅专栏

在这里插入图片描述

目录

VITE版本：v5.2.8

一、声明环境变量配置文件

在根目录下新建文件 .env.development以及 .env.production环境变量配置文件。

# 开发环境
VITE_MODE='development'

## 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_BASE_API = 'https://vitejs.dev.cn/'

# 生产环境
VITE_MODE='production'

## 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_BASE_API = 'https://vitejs.prod.cn/'

若是有其他环境需求，也可以根据以上格式创建。

如 test 环境： .env.test

# 测试环境
VITE_MODE='test'

## 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_BASE_API = 'https://vitejs.test.cn/'

二、vite.config.js基础配置

1、defineConfig()、loadEnv()

defineConfig() 工具函数默认支持 ts 的类型提示。
defineConfig() 可以接收一个配置对象{}为参数，也可以接收一个函数()=>{}为参数；当接收一个函数为参数时，函数的参数为一个条件对象。如下：

import { defineConfig, loadEnv } from 'vite'

// https://vitejs.dev/config/
export default defineConfig((conditionalConfig) => {
  console.log(conditionalConfig);
  console.log(process.cwd(), __dirname); 
  console.log(process.cwd() === __dirname); 
  const { mode, command, isSsrBuild, isPreview } = conditionalConfig; // conditionalConfig对象包含4个字段
  const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
  console.log(env);
  return {
    root: process.cwd(), // 项目根目录（index.html 文件所在的位置）
	base: env.VITE_MODE === 'production' ? './' : '/', // 开发或生产环境服务的公共基础路径。
  };
})

打印内容如下图：
在这里插入图片描述

  1. 其中 conditionalConfig 对象包含 4 个字段，字段具体意义请参考：https://cn.vitejs.dev/config/。

  2. __dirname和process.cwd() 都是用于获取文件系统路径的全局变量和方法，但它们有不同的含义和用途。

    • process.cwd() 是一个方法，用于获取 Node.js 进程的当前工作目录。它返回的是 Node.js 进程启动时所在的工作目录的绝对路径。这个路径通常是在启动 Node.js 应用程序时指定的，或者是在命令行中运行 Node.js 时的当前目录。

    • __dirname 是一个特殊的全局变量，用于获取当前模块的目录名。它返回的是包含当前模块文件目录的绝对路径。这个路径是相对于当前模块文件的位置的，所以它的值在不同模块中可能不同。

    我的理解是 process.cwd()是在启动项目时动态获取的，__dirname则是根据当前文件的目录结构决定的。

  3. loadEnv(mode, __dirname) 根据 mode 参数判断当前运行时环境，以获取不同环境配置的环境变量。

上面是一个 development 服务环境，比方说我们要连接 test 环境该如何操作：

  • package.json 文件的 scripts 对象中添加 test 启动项。
      "scripts": {
    "dev": "vite",
    "test": "vite --mode test", // 添加此项
    "build": "vite build",
    "preview": "vite preview"
  },
    这种 vite --mode test 方式属于 vite 命令行，详情请参考：https://cn.vitejs.dev/guide/cli.html
  • 启动项目 npm run test，这时候在控制台查看打印项，如下：
    在这里插入图片描述

2、plugins配置项

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
  const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
  return {
	plugins:[vue()] // 默认配置vue插件
  };
})

默认配置只有 vue 插件，当你有其他需求时，需要自行导入其他插件；

比如说 vue 的开发者工具vite-plugin-vue-devtools，还有按需自动导入 API 组件插件 unplugin-auto-import。

安装插件：

npm add -D vite-plugin-vue-devtools
npm add -D unplugin-auto-import

# npm install 等价于 npm i 等价于 npm add  
# --save-dev  等价于 -D
# --save 可省略

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools';
import AutoImport from 'unplugin-auto-import/vite' // 导入按需自动加载API插件

// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
  const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
  return {
	plugins:[
	  VueDevTools(),
	  vue(), // 默认配置vue插件
	  AutoImport({ imports: ["vue", "vue-router"] }), // 配置vue、vue-router的API自动加载
	]
  }
})

上面配置成功后，vue3组件中就不需要再手动书写 import 语句引入 vue3 API，可直接在页面中书写 vue3 API，并且控制台不会报错，不会影响页面渲染。

<script setup>
  const count = ref("123")
</script>

不使用插件则控制台报错，页面也无法渲染：
在这里插入图片描述

3、server配置项

import { defineConfig, loadEnv } from 'vite'

// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
  const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
  return {
	server:{
      host: '0.0.0.0', // 指定服务器应该监听哪个 IP 地址，默认localhost，可设置为'0.0.0.0'或 true
      port: 9527,      // 端口号，默认5173
      open: true,	   // 开发服务器启动时，自动在浏览器中打开应用程序
      // 本地代理
      proxy: {
      	// 简写（字符串）
        '/mock': env.VITE_BASE_API,
        // 带选项写法（对象）
        '/api': {
          target: env.VITE_BASE_API,                      // 从环境变量文件取值
          changeOrigin: true,                             // 支持跨域
          rewrite: (path) => path.replace(/^\/api/, ''),  // 路径重写
        },
        // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
        '/socket.io': {
          target: 'ws://localhost:5174',
          // 支持 websocket
          ws: true,
        },
      }
	}
  }
})

server 中的 host 默认值是 localhost，此时启动项目，只会监听本地服务。
在这里插入图片描述
如果将此设置为 '0.0.0.0' 或者 true 将监听所有地址，包括局域网和公网地址。此设置可以让同一局域网下的其他电脑访问本机 url 地址。
在这里插入图片描述

4、resolve配置项

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
  const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
  return {
	resolve:{
	  alias: {
        // 第一种方式（最简洁）
        '@': path.resolve(__dirname, './src'),
        // 第二种方式
        '@style': fileURLToPath(new URL('./src/assets/style', import.meta.url)),
        '@images': fileURLToPath(new URL('./src/assets/images', import.meta.url)),
      },
      // 导入时想要省略的扩展名列表。 vite官方不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。
      extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
	}
  }
})

上面两种设置别名的方式都会生成一个绝对路径，如：

console.log(path.resolve(__dirname, './src')); 
// F:\web\03_Vue\vite-vue3-project-js\src

console.log(fileURLToPath(new URL('./src/assets/style', import.meta.url))); 
// F:\web\03_Vue\vite-vue3-project-js\src\assets\style

alias 还有另一种以数组配置的形式：

resolve:{
  alias: [
    {
	  find: '@',
	  replacement: path.resolve(__dirname, './src')
    }
  ]
}

5、css配置项

由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如postcss-nesting）来编写简单的、符合未来标准的 CSS。

话虽如此，但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖。

# .scss and .sass
npm add -D sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus

Vite 通过 postcss-import 预配置支持了 CSS @import 内联，在 CSS 文件中可以直接使用 @import 导入其他样式文件。

如果需要额外的 CSS 配置，请自行定义，比方说自动添加 CSS3 前缀插件 autoprefixer 和将 px 值转换成 rem 值插件 postcss-pxtorem。

npm i autoprefixer    			# 自动添加 CSS3 前缀
npm i -D postcss-pxtorem		# 将 px 值转换成 rem 值，使得页面更好地适配不同大小的设备

postcss 插件配置：

import { defineConfig, loadEnv } from 'vite'
import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'

// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
  const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
  return {
	css:{
      devSourcemap: true, // 可以查看 CSS 的源码
	  postcss: {
		plugins: [
          postCssPxToRem({
            rootValue: 16, 	 // 1rem的大小
            propList: ['*'], // 需要转换的属性，*代表全部转换
          }),
          autoprefixer({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
            ],
          })
        ]
	  }
	}
  }
})

6、build配置项

import { defineConfig, loadEnv } from 'vite'

// https://vitejs.dev/config/
export default defineConfig(({ mode}) => {
  const env = loadEnv(mode, __dirname); // 根据 mode 来判断当前是何种环境
  return {
	build:{
	  outDir: "dist",      // 默认dist（可省略），打包后输出文件
      assetsDir: "assets", // 默认assets（可省略），指定静态资源存放路径
      sourcemap: false,    // 默认false（可省略），是否构建sourcemap文件（生产不需要）
      minify: 'terser',    // 客户端默认构建是esbuild，需安装terser：`npm i -D terser`
      terserOptions: {
        // 生产环境移除console、debugger
        compress: {
          drop_console: true,   // 默认false
          drop_debugger: true,  // 默认true
        },
      },
  }
})

打个包试一试：npm run build
在这里插入图片描述

三、vite.config.js配置完整代码

import { defineConfig, loadEnv } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools';
import AutoImport from 'unplugin-auto-import/vite' // 按需自动加载API插件
import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, __dirname);  // 加载不同环境下的环境变量
  return {
    root: process.cwd(), // 项目根目录（index.html 文件所在的位置）
    base: env.VITE_MODE === 'production' ? './' : '/', // 开发或生产环境服务的公共基础路径。
    // 插件配置
    plugins: [
      VueDevTools(),
      vue(),
      AutoImport({ imports: ["vue", "vue-router"] }),
    ],
    // 开发服务配置
    server: {
      host: '0.0.0.0', // 默认localhost
      port: 9527,
      open: true,
      proxy: {
        // 简写（字符串）
        '/mock': env.VITE_BASE_API,
        // 带选项写法（对象）
        '/api': {
          target: env.VITE_BASE_API,                      // 从环境变量文件取值
          changeOrigin: true,                             // 支持跨域
          rewrite: (path) => path.replace(/^\/api/, ''),  // 路径重写
        },
        // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
        '/socket.io': {
          target: 'ws://localhost:5174',
          // 支持 websocket
          ws: true,  
        },
      }
    },
    resolve: {
      // 文件路径别名，当使用文件系统路径的别名时，请始终使用绝对路径。
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@style': path.resolve(__dirname, './src/assets/style'),
        '@images': path.resolve(__dirname, './src/assets/images'),
      },
      // 导入时想要省略的扩展名列表。 vite官方不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。
      extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']
    },
    css: {
      // 内联的 PostCSS 配置，格式同 postcss.config.js，也可以单独在根目录创建 postcss.config.js 进行配置
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 16, 	 // 1rem的大小
            propList: ['*'], // 需要转换的属性，*代表全部转换
          }),
          autoprefixer({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
            ],
          }),
        ]
      },
    },
    build: {
      outDir: "dist",      // 默认dist，打包后输出文件
      assetsDir: "assets", // 默认assets，指定静态资源存放路径
      sourcemap: false,    // 默认false，是否构建sourcemap文件（生产不需要）
      minify: 'terser',     // vite默认构建是esbuild,需安装terser npm i -D terser
      terserOptions: {
        // 生产环境移除console、debugger
        compress: {
          drop_console: true,   // 默认false
          drop_debugger: true,  // 默认true
        },
      },
    }
  }
})
可达鸭头上站青蛙
关注
  • 21
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vite.config.js详细配置。
weixin_46409887的博客
02-08 2万+
vite.config.js详细配置。
使用vite从头搭建一个vue3项目
最新发布
04-18
使用vite3搭建的一套简单的vue3项目模板，以供自由学习使用。
关于 vite.config.js 相关配置，拿走不谢
前端人的博客
12-10 1万+
使用 vite 创建项目完成后会自动生成 一个 vite.config.js 代码如下： import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], }) 当以命令方式运行 vite 时，vite 会自动解析项目根目录下 vite.config.js 的文件。配置不全时，在开发环境下运行都是正常的，但是打包上线的时候就
vite.config.js
Jelly儿的博客
03-08 283
vite.config.js
【vite·4】vite在多环境下的配置集成方案及defineConfig（非常详细）
weixin_46769087的博客
11-14 1万+
vite在多环境下的配置集成方案及defineConfig
vite.config.js常用配置
热门推荐
孤傲的博客
11-02 4万+
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动：快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
Vue3.0教程 （二）Vite.config配置
燃燃的大尾巴
07-26 7296
vue3脚手架搭建
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
这个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板，旨在帮助开发者快速搭建基于Cesium.js的Vue3应用程序。该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 ...
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
vite5+vue3+ import.meta.glob动态导入vue组件
vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass
02-08
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite和vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理持久化储存等功能 vue3：...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3中vite.config.js文件常用配置
xu1912715645的博客
01-07 1493
vite.config.js 文件是 Vite 项目的配置文件，通过该文件可以对 Vite 进行一些配置，包括插件配置、构建配置、开发服务器配置等
Vue+vite创建项目关于vite.config.js文件的配置
start_sea的博客
06-27 3845
vue-cli 创建的项目，项目配置文件文件名为vue.config.js,webpack 创建项目的项目配置文件文件名为webpack.config.js，而vite工具构建完成的项目，项目配置文件文件名为vite.config.js。Vue项目创建时，我们见过vue-cli 创建项目和webpack 创建项目等方式。创建完成的项目，最明显的去别就是，项目配置文件命名不同，当然，配置语法也有不同。根据需要添加自定义配置，比如项目运行时的配置及项目打包输出的打包配置。
用vue实现一个淘宝购物车，给和我一样苦苦挣扎的前端小白（更新）
weixin_33824363的博客
11-15 1376
最近后端的同事要我写一个购物车，一开始我用jQuery写，但写着写着发现逻辑太混乱了，写不下去。最后花了五分钟找了个demo丢给了他。后来我不甘心，毕竟水平菜还不求上进就完蛋了。所以我想着用vue来实现一个。 本来想看看别人的代码，但搜索了下github发现，能找到的购物车都是两级分类的。而京东、淘宝之流都是三级分类的： 1. 全选 ...
vite 项目 vite.config.js 文件基本配置
weixin_50853984的博客
06-04 6807
Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。 Vite具有以下特点： 快速的冷启动 即时热模块更新（HMR，Hot Module Replacement） 真正按需编译 Vite是在推出Vue 3的时候开发的，目前仅支持Vue
Vite.config.ts最全配置
舒梵的博客
08-10 2万+
vite.config.ts配置
vite.config.js 的一些常用配置你知道吗
weixin_57031986的博客
02-18 669
vite.config.js 的一些常用配置你知道吗
vite.config 配置文件
青蛙king的博客
04-21 1万+
目录一、使用 vite 创建的项目里默认的配置二、vite 区分不同环境的配置三、vite 基本配置汇总1、配置 @ 符号 当以命令行方式运行 vite 时，Vite 会自动解析 项目根目录 下名为 vite.config.js（或 vite.config.ts） 的文件。 一、使用 vite 创建的项目里默认的配置 使用 vite 创建项目完成后会自动生成 一个 vite.config.js 文件，当然你可以将其名重定义为 vite.config.ts 文件。其默认代码如下： import { defi
vite.config.js 配置
菠萝蜜
06-02 1638
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动： 快速的冷启动，不需要等待打包操作； 即时的热模块更新，替换性能和模块数量的解耦让更新飞起； 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。 根据您的实际需求，您可以在这个基本的配置文件中添加、删除或修改配置选项。vite.config.js 配置。在上面的配置文件中，我们使用。
vue3项目里只有vite.config.js 没有vue.config.js
02-05
在Vue 3项目中，如果只有vite.config.js而没有vue.config.js，那么说明该项目是使用Vite作为构建工具而不是Vue CLI。Vite是一个基于ES模块的构建工具，它在开发环境下具有快速的冷启动和热模块替换能力，可以提供更好的开发体验。 vite.config.js是Vite项目的配置文件，用于配置构建工具的行为和特性。在该文件中，你可以进行一些常见的配置，例如指定入口文件、配置代理、设置构建输出路径等。具体的配置选项可以根据项目需求进行调整。 如果你想了解更多关于Vite的配置和使用，请参考Vite官方文档：https://vitejs.dev/config/

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值