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

在这里插入图片描述

目录

  • 一、声明环境变量配置文件
  • 二、vite.config.js基础配置
    • 1、defineConfig()、loadEnv()
    • 2、plugins配置项
    • 3、server配置项
    • 4、resolve配置项
    • 5、css配置项
    • 6、build配置项
  • 三、vite.config.js配置完整代码

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'或 trueport: 9527,      // 端口号，默认5173open: 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',// 支持 websocketws: 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\srcconsole.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、debuggercompress: {drop_console: true,   // 默认falsedrop_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', // 默认localhostport: 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',// 支持 websocketws: 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 terserterserOptions: {// 生产环境移除console、debuggercompress: {drop_console: true,   // 默认falsedrop_debugger: true,  // 默认true},},}}
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/823652.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Qt 系统相关

Qt 系统相关

这里写目录标题 Qt 事件事件介绍事件的处理按键事件单个按键组合按键 ⿏标事件⿏标单击事件⿏标释放事件⿏标双击事件⿏标移动事件滚轮事件 定时器QTimerEvent 类QTimer 类获取系统⽇期及时间 事件分发器概述事件分发器⼯作原理 事件过滤器 Qt ⽂件Qt ⽂件概述输⼊输出设备类⽂…
阅读更多...
GPT国内怎么用？4月最新版本来了

GPT国内怎么用？4月最新版本来了

ChatGPT镜像 今天在知乎看到一个问题&#xff1a;“平民不参与内测的话没有账号还有机会使用ChatGPT吗&#xff1f;” 从去年GPT大火到现在&#xff0c;关于GPT的消息铺天盖地&#xff0c;真要有心想要去用&#xff0c;途径很多&#xff0c;别的不说&#xff0c;国内GPT的镜像…
阅读更多...
HarmonyOS开发实例：【任务延时调度】

HarmonyOS开发实例：【任务延时调度】

介绍 本示例使用[ohos.WorkSchedulerExtensionAbility] 、[ohos.net.http]、[ohos.notification] 、[ohos.bundle]、[ohos.fileio] 等接口&#xff0c;实现了设置后台任务、下载更新包 、保存更新包、发送通知 、安装更新包实现升级的功能。 效果预览 使用说明 安装本应用之…
阅读更多...
数字乡村探索：引领农村未来发展新方向——科技创新赋能乡村现代化与农民生活品质提升之旅

数字乡村探索：引领农村未来发展新方向——科技创新赋能乡村现代化与农民生活品质提升之旅

目录 一、数字乡村的内涵与特点 二、数字乡村的探索进展 三、数字乡村面临的挑战与机遇 四、数字乡村的未来发展方向与路径 五、数字乡村助力农村产业升级 六、数字乡村促进城乡融合发展 七、数字乡村激发农民创新创业活力 八、数字乡村提升农民获得感和幸福感 九、展…
阅读更多...
Postman还能做Mock？又学了一招！

Postman还能做Mock？又学了一招！

1、什么是mock测试 Mock 测试就是在测试活动中&#xff0c;对于某些不容易构造或者不容易获取的数据/场景&#xff0c;用一个Mock对象来创建以便测试的测试方法。 2、Mock测试常见场景 无法控制第三方系统接口的返回&#xff0c;返回的数据不满足要求 依赖的接口还未开发完成…
阅读更多...
Scala 02——Scala OOP

Scala 02——Scala OOP

文章目录 Scala 02——Scala OOP前序类1. 类的基本结构2. 普通类和数据类的区别 继承1. extends2. override 抽象类抽象类的特点 单例对象1. 定义2. 场景3. 方法3.1 方法定义3.2 方法调用 特质1. 抽象类和特质的区别2. 强制混入语法3. 静态混入和动态混入 内部类Java和Scala内部…
阅读更多...
【C语言】贪吃蛇项目（1） - 部分Win32 API详解 及 贪吃蛇项目思路

【C语言】贪吃蛇项目（1） - 部分Win32 API详解 及 贪吃蛇项目思路

文章目录 一、贪吃蛇项目需要实现的基本功能二、Win32 API介绍2.1 控制台2.2 部分控制台命令及调用函数mode 和 title 命令COORD 命令GetStdHandle&#xff08;获取数据&#xff09;GetConsoleCursorInfo&#xff08;获取光标数据&#xff09;SetConsoleCursorInfo &#xff08…
阅读更多...
蓝桥杯（基础题）

蓝桥杯（基础题）

试题 C: 好数 时间限制 : 1.0s 内存限制: 256.0MB 本题总分&#xff1a;10 分 【问题描述】 一个整数如果按从低位到高位的顺序&#xff0c;奇数位&#xff08;个位、百位、万位 &#xff09;上 的数字是奇数&#xff0c;偶数位&#xff08;十位、千位、十万位 &…
阅读更多...
PhotoShop2024安装包（亲测可用）

PhotoShop2024安装包（亲测可用）

目录 一、软件简介 二、软件下载 一、软件简介 Adobe Photoshop是一款由Adobe Systems开发的图像编辑软件。它被广泛用于图像处理和数字艺术创作&#xff0c;是设计师、摄影师和艺术家们的首选工具之一。 主要功能&#xff1a; 图像编辑&#xff1a; Photoshop提供了丰富的编辑…
阅读更多...
激光共聚焦显微镜测粗糙度，解读表面粗糙度的科技利器

激光共聚焦显微镜测粗糙度，解读表面粗糙度的科技利器

激光共聚焦显微镜&#xff08;Laser Scanning Confocal Microscope&#xff0c;简称LSCM&#xff09;是一种光学显微镜&#xff0c;通过激光束的聚焦和散射技术&#xff0c;能够实现高分辨率的三维图像采集和表面测量。其在科学研究、工程领域等领域有着广泛的应用&#xff0c;…
阅读更多...
【环境搭建】（五）Ubuntu22.04安装cuda_11.8.0+cudnn_8.6.0

【环境搭建】（五）Ubuntu22.04安装cuda_11.8.0+cudnn_8.6.0

一个愿意伫立在巨人肩膀上的农民...... 设备配置&#xff1a; 一、安装GCC 安装cuda之前&#xff0c;首先应该安装GCC&#xff0c;安装cuda需要用到GCC&#xff0c;否则报错。可以先使用下方指令在终端查看是否已经安装GCC。 gcc --version 如果终端打印如下则说明已经安装…
阅读更多...
使用SpringBoot将中国地震台网数据保存PostGIS数据库实践

使用SpringBoot将中国地震台网数据保存PostGIS数据库实践

目录 前言 一、数据转换 1、Json转JavaBean 2、JavaBean与数据库字段映射 二、空间数据表设计 1、表结构设计 三、PostGIS数据保存 1、Mapper接口定义 2、Service逻辑层实现 3、数据入库 4、运行实例及结果 总结 前言 在上一篇博客中基于Java的XxlCrawler网络信息爬…
阅读更多...
c++的学习之路：23、多态（2）

c++的学习之路：23、多态（2）

摘要 多态的抽象类、原理以及虚表。 目录 摘要 一、抽象类 1、 概念 2、接口继承和实现继承 二、多态的原理 1、虚函数表 2、动态绑定与静态绑定 三、单继承和多继承关系的虚函数表 1、单继承中的虚函数表 2、多继承中的虚函数表 四、思维导图 一、抽象类 1、 概…
阅读更多...
消息中间件Kafka分布式数据处理平台

消息中间件Kafka分布式数据处理平台

目录 一.Kafka基本介绍 1.定义 2.特点 &#xff08;1&#xff09;高吞吐量、低延迟 &#xff08;2&#xff09;可扩展性 &#xff08;3&#xff09;持久性、可靠性 &#xff08;4&#xff09;容错性 &#xff08;5&#xff09;高并发 3.系统架构 &#xff08;1&#…
阅读更多...
华为海思校园招聘-芯片-数字 IC 方向 题目分享——第五套

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第五套

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第五套 (共9套&#xff0c;有答案和解析&#xff0c;答案非官方&#xff0c;仅供参考&#xff09;&#xff08;共九套&#xff0c;每套四十个选择题&#xff09; 部分题目分享&#xff0c;完整版获取&#xff08;WX:didadida…
阅读更多...
JVM 方法调用之方法分派

JVM 方法调用之方法分派

JVM 方法调用之方法分派 文章目录 JVM 方法调用之方法分派1.何为分派2.静态分派3.动态分派4.单分派与多分派5.动态分派的实现 1.何为分派 在上一篇文章《方法调用之解析调用》中讲到了解析调用&#xff0c;而解析调用是一个静态过程&#xff0c;在类加载的解析阶段就确定了方法…
阅读更多...
ECharts：五大卓越在线示例库助力高效数据可视化开发

ECharts：五大卓越在线示例库助力高效数据可视化开发

1. ECharts官方示例库 ECharts官网提供的示例库是最权威、最新的展示平台&#xff0c;涵盖了所有基础和高级图表类型&#xff0c;每个示例都配有详尽的代码解释和配置说明。开发者可以直接查看源代码&#xff0c;复制粘贴后稍加修改就能应用于实际项目中。 2. Make A Pie - EC…
阅读更多...
【笔试训练】day4

【笔试训练】day4

不到5分钟写完&#xff0c;今天的题又又又难一点啦! 1.Fibonacci数列 思路&#xff1a; 直接模拟一遍斐波那契数列的递增过程&#xff0c;大于n就直接结束。因为后面只会越来越大&#xff0c;跟题目求的最小步数不符。在这个过程中用一个变量去维护这个当前的元素与目标n还差…
阅读更多...
【编程TOOL】VC++6.0下载安装配置使用保姆式教程

【编程TOOL】VC++6.0下载安装配置使用保姆式教程

目录 ​编辑 1.软件介绍 2.软件下载 3.软件安装 3.1.下载得到可执行文件并双击进行安装 3.2. 点击下一步 3.3. 选择安装位置 3.4. 勾选“创建桌面快捷方式”并点击下一步 5. 点击安装并等待 3.6. 先取消运行&#xff0c;后点击完成&#xff0c;软件即安装完毕 4.兼容性配置 4.1…
阅读更多...
基于SpringBoot+Vue的疾病防控系统设计与实现（源码+文档+包运行）

基于SpringBoot+Vue的疾病防控系统设计与实现（源码+文档+包运行）

一.系统概述 在如今社会上&#xff0c;关于信息上面的处理&#xff0c;没有任何一个企业或者个人会忽视&#xff0c;如何让信息急速传递&#xff0c;并且归档储存查询&#xff0c;采用之前的纸张记录模式已经不符合当前使用要求了。所以&#xff0c;对疾病防控信息管理的提升&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023