使用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'或 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
        },
      },
    }
  }
})

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

react 安装教程

react 安装教程

1、安装脚手架 脚手架主要分为三个部分&#xff1a; react:顶级库。 react-dom&#xff1a;运行环境。 react-scripts&#xff1a;运行和打包react应用程序的脚本和配置。 npm install -g create-react-app 2、创建项目 #查看版本号 create-react-app -V #创建项目 creat…
阅读更多...
李廉洋：4.23黄金休市之后大幅下跌，原油小幅度上涨。走势分析！

李廉洋：4.23黄金休市之后大幅下跌，原油小幅度上涨。走势分析！

今年以来推动金价上涨的因素是亚洲的需求&#xff0c;很可能来自各国央行。最近又有零售买盘和一些金融买盘作为补充。目前的问题是&#xff0c;不断上升的债券收益率正在争夺资金。美国2年期国债的收益率接近5%&#xff0c;在美联储降息导致收益率开始下降之前&#xff0c;这仍…
阅读更多...
13.Nacos简介，下载，安装，启动-windows

13.Nacos简介，下载，安装，启动-windows

Nacos是阿里巴巴的产品&#xff0c;现在是SpringCloud的一个组件。 相比Eureka功能更加丰富&#xff0c;服务注册与发现和分布式配置。 Nacos下载地址&#xff1a; https://github.com/alibaba/nacos windows下载nacos-server-1.4.1.zip文件 nacos是基于java语言实现的&…
阅读更多...
iStat Menus for Mac：强大的系统监控工具

iStat Menus for Mac：强大的系统监控工具

iStat Menus for Mac是一款功能强大的系统监控工具&#xff0c;专为Mac用户设计&#xff0c;旨在帮助用户全面了解电脑的运行状态&#xff0c;提高电脑的性能和稳定性。 iStat Menus for Mac v6.73 (1239)中文版下载 该软件可以实时监测CPU使用率、内存占用、网络速度、硬盘活动…
阅读更多...
力扣HOT100 - 25. K 个一组翻转链表

力扣HOT100 - 25. K 个一组翻转链表

解题思路&#xff1a; class Solution {public ListNode reverseKGroup(ListNode head, int k) {ListNode dum new ListNode(0, head);ListNode pre dum;ListNode end dum;while (end.next ! null) {for (int i 0; i < k && end ! null; i) {end end.next;}if …
阅读更多...
思科 Packet Tracer 实验八 DHCP基本配置（以路由为中继）

思科 Packet Tracer 实验八 DHCP基本配置（以路由为中继）

一、实验目的 了解思科网络设备的配置基本特点及 IOS 命令基本操作方法 了解DHCP的工作原理及基本配置 二、实验过程 1) 实验拓扑如下&#xff1a; 2&#xff09;由于使用DHCP‘协议动态配置ip&#xff0c;所以除了DHCP服务器和路由器接口外其他的主机&#xff0c;服务器的i…
阅读更多...
Spring之AOP编程

Spring之AOP编程

一.静态代理设计模式 1.为什么需要代理设计模式&#xff1f; 在JavaEE开发中&#xff0c;哪个层次最为重要&#xff1f; DAO层->Service层->Controller层。最重要的是Service层 Service层包含了哪些代码&#xff1f; 1.核心功能&#xff1a;业务运算DAO调用 2.额外…
阅读更多...
必应搜索广告与谷歌搜索广告对比那个更好？

必应搜索广告与谷歌搜索广告对比那个更好？

搜索引擎广告作为企业获取潜在客户的重要渠道之一&#xff0c;其效果直接关系到营销策略的成功与否。两大搜索引擎巨头——谷歌&#xff08;Google&#xff09;和必应&#xff08;Bing&#xff09;各自提供了广告平台&#xff0c;即谷歌广告&#xff08;Google Ads&#xff09;…
阅读更多...
MSR是个什么寄存器

MSR是个什么寄存器

MSR 这种寄存器专门用于调试、程序执行跟踪、计算机性能监控、简化软件编程、电源控制等等各种实验性功能。 什么是 MSR MSR 的概念是不易理解&#xff0c;所以这一节只说一些 MSR 的外在&#xff0c;比如形容和指令等&#xff0c;然后展开说说&#xff0c;看完整篇文章你应该…
阅读更多...
向媒体投稿有了好方法财政单位信息宣传工作简单又轻松

向媒体投稿有了好方法财政单位信息宣传工作简单又轻松

当我初涉财政单位的信息宣传岗位,肩负起对外展示单位风采、传播政策信息的重要职责时,我深刻体验到了投稿之路的艰辛曲折。初期,对于如何有效对接媒体并成功发表稿件,我感到一片茫然,仿佛置身于浩瀚的信息海洋中,无从下手。 那时,我的工作日常就是广泛搜集各类媒体的联系方式,特…
阅读更多...
稀碎从零算法笔记Day56-LeetCode:组合总和 Ⅳ

稀碎从零算法笔记Day56-LeetCode:组合总和 Ⅳ

题型&#xff1a;DP、数组 链接&#xff1a;377. 组合总和 Ⅳ - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 给你一个由 不同 整数组成的数组 nums &#xff0c;和一个目标整数 target 。请你从 nums 中找出并返回总和为 target 的元素组合的…
阅读更多...
数据结构系列-堆排序

数据结构系列-堆排序

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 昨天我们实现的堆的搭建&#xff0c;我们今天实现以下堆的排序&#xff0c; 堆的排序的最大的优点就是提高的效率&#xff0c;减小了时间复杂度&#xff0c;在这个里面我们有一个…
阅读更多...
C++ 并发编程指南（11）原子操作 | 11.5、内存模型

C++ 并发编程指南（11）原子操作 | 11.5、内存模型

文章目录 一、C 内存模型1、为什么需要内存模型&#xff1f;2、happens-before和synchronize-with两个关键概念2.1、happens-before2.2、synchronize-with2.3、总结 前言 C 11标准中最重要的特性之一&#xff0c;是大多数程序员都不会关注的东西。它并不是新的语法特性&#xf…
阅读更多...
系统思考—业务复盘

系统思考—业务复盘

今日的JSTO——《业务复盘》中&#xff0c;赵海懿老师的分享启发了我深度反思。她提到的两句话特别引人思考&#xff1a; 1、学校里学到的最重要的东西&#xff0c;就是“最重要的东西在学校里学不到”。 2、学习型组织不只是组织学习。 这些话提醒我们&#xff0c;真正的学习…
阅读更多...
区块链钱包开发指南: 探究区块链钱包开发涉及

区块链钱包开发指南: 探究区块链钱包开发涉及

区块链钱包是连接用户与区块链网络的重要工具&#xff0c;它们不仅提供了安全的存储和管理数字资产的功能&#xff0c;还允许用户进行交易和与区块链上的智能合约进行互动。本文将探究区块链钱包开发涉及的关键方面和技术要点。 1. 区块链钱包类型 区块链钱包可以分为以下几种…
阅读更多...
Unity中的UI系统之UGUI

Unity中的UI系统之UGUI

目录 概述UGUI基础——六大基础组件六大基础组件概述Canvas画布组件CanvasScaler画布缩放控制器组件必备知识恒定像素模式缩放模式恒定物理模式3D模式 Graphic Raycaster图形射线投射器EventSystem和Standalone Input ModuleRectTransform UGUI基础——三大基础控件Image图像控…
阅读更多...
JS - 以工厂模式和原型模式方式建造对象、JS的垃级回收机制、数组的使用

JS - 以工厂模式和原型模式方式建造对象、JS的垃级回收机制、数组的使用

创建对象的方式 使用工厂方法来建造对象 在JS中我们可以通过以下方式进行创建对象&#xff1a; var obj {name:"孙悟空",age:18,gender:"男",sayName:function(){alert(this.name);}};var obj2 {name:"猪八戒",age:28,gender:"男",…
阅读更多...
【第4讲】XTuner 微调 LLM:1.8B、多模态、Agent

【第4讲】XTuner 微调 LLM:1.8B、多模态、Agent

目录 1 简介2 基础知识2.1 finetune简介2.2 xtuner简介2.2.1 技术架构2.2.2 快速上手xtuner 2.3 8GB显存玩转LLM&#xff08;intern1.8b&#xff09;2.3.1 flash attention vs deepspeed zero2.3.2 相关版本更新和使用 2.4 多模态LLM2.4.1 多模态LLaVA基本原理简介2.4.2 快速上…
阅读更多...
Linux的学习之路：18、进程间通信（2）

Linux的学习之路：18、进程间通信（2）

摘要 本章主要是说一下命名管道和共享内存 目录 摘要 一、命名管道 1、创建一个命名管道 2、匿名管道与命名管道的区别 3、命名管道的打开规则 4、代码实现 二、system V共享内存 1、共享内存 2、共享内存函数 三、代码 四、思维导图 一、命名管道 1、创建一个命…
阅读更多...
24年做抖店，如何快速脱离“商家新手期”？

24年做抖店，如何快速脱离“商家新手期”？

我是王路飞。 这个“新手期”不是你们理解的那种店铺新手期&#xff0c;现在抖店没有新手期这一说了。 主要说的是从商家角度来说&#xff0c;如何在最短时间内从一个没有电商经验的新手&#xff0c;蜕变成一个有经验、有流程、有操作、甚至有一定数据的“老玩家”&#xff1…
阅读更多...
最新文章

Copyright @ 2022~2023