Vue3：初识Vue，Vite服务器别名及其代理配置

一、创建一个Vue3项目

创建Vue3项目默认使用Vite作为现代的构建工具，以下指令本质也是通过下载create-vue来构建项目。
基于NodeJs版本大于等于18.3，使用命令行进行操作。

1、命令执行

npm create vue@latest

输入项目名称

2、选择附加功能

选择要包含的功能，常用的Router、TypeScript等。

这样一个完整的Vue项目就构建完成了

二、Vite构建工具

1、简介

文档入口：Vite官方中文文档

2、基础配置

以命令行方式运行 vite 时，Vite 会自动解析 项目根目录 下名为 vite.config.js 的配置文件（也支持其他 JS 和 TS 扩展名）。你可以显式地通过 --config 命令行选项指定一个配置文件（相对于 cwd 路径进行解析）

vite --config my-config.js

一个基础的配置框架如下：

// vite.config.js
export default {// 配置选项
}

同时可以使用defineConfig工具来获取类型，括号内部可以传递一个箭头函数去传递参数。其中command是根据运行服务器的控制台命令进行传参的。例如：npm run dev 这里的command就是dev，这个可以用于情景化配置。 而mode 参数默认有 development 和 production 两种模式，默认是development的开发模式。注意：带箭头函数一定要加return才行。

import { defineConfig } from 'vite'
export default defineConfig({// ...
})

import { defineConfig } from 'vite'
export default defineConfig({ command, mode }) => {return{// ...}
})

插件配置使用plugin字段配置相关插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({ command, mode }) => {return{plugins: [vue()]// ...}})

别名配置，只要修改对应的@和./src即可，添加新的别名要以，号相隔。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
export default defineConfig({ command, mode }) => {return{resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},}})

完整常用配置

import { defineConfig } from 'vite'
import { resolve } from "path"; // 主要用于alias文件路径别名
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()], // 配置需要使用的插件列表base: './',   // 在生产中服务时的基本公共路径publicDir: 'public',  // 静态资源服务的文件夹, 默认"public"resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},// 引入第三方的配置,强制预构建插件包server: {host: 'localhost', // 指定服务器主机名port: 3000, // 指定服务器端口open: true, // 在服务器启动时自动在浏览器中打开应用程序strictPort: false, // 设为 false 时，若端口已被占用则会尝试下一个可用端口,而不是直接退出https: false, // 是否开启 httpscors: true, // 为开发服务器配置 CORS。默认启用并允许任何源proxy: { // 为开发服务器配置自定义代理规则// 字符串简写写法 '/foo': 'http://192.168.xxx.xxx:xxxx', // 选项写法'/api': {target: 'http://192.168.xxx.xxx:xxxx', //代理接口changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
})

3、环境变量

使用loadEnv函数加载项目根目录下的env文件。在项目根目录下创建不同环境的 .env 文件。
比如：.env.development：开发环境使用 .env.production：生产环境使用。根据相应的Vite模式会加载相应的环境

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {// 根据当前工作目录中的 `mode` 加载 .env 文件// 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。const env = loadEnv(mode, process.cwd(), '')return {// vite 配置define: {__APP_ENV__: JSON.stringify(env.APP_ENV),},}
})

解释一下process.cwd()相当于项目根目录，JSON.stringify会将对应值转换为JavaScript字符串。那么在其他代码里使用该环境变量呢？可以通过process获得define定义的环境变量（define的作用是定义全局变量），以下是示例代码(只截取了一部分）。

// src/main.js
if (__APP_ENV__ === 'development') {console.log('当前处于开发环境');
} else {console.log('当前处于生产环境');
}// 使用 API_URL 环境变量
const apiUrl = process.env.API_URL;
console.log('API 地址:', apiUrl);

4、服务配置

文档：serverConfig

server的常用基础配置如下

export default defineConfig({server: {host: 'localhost', // 指定服务器主机名port: 3000, // 指定服务器端口open: true, // 在服务器启动时自动在浏览器中打开应用程序,也可以指定urlstrictPort: false, // 设为 false 时，若端口已被占用则会尝试下一个可用端口,而不是直接退出https: false, // 是否开启 httpscors: true, // 为开发服务器配置 CORS。默认启用并允许任何源proxy: { // 为开发服务器配置自定义代理规则// 字符串简写写法 '/foo': 'http://192.168.xxx.xxx:xxxx', `在这里插入代码片`// 选项写法'/api': {target: 'http://192.168.xxx.xxx:xxxx', //代理接口changeOrigin: true,//是否允许跨域rewrite: (path) => path.replace(/^\/api/, '')}}}
})

四种代理的编写方法如下，分别为字符串简写、带选项、正则、使用proxy实例这四种写法。

export default defineConfig({server: {proxy: {// 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo'/foo': 'http://localhost:4567',// 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},// 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/'^/fallback/.*': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/fallback/, ''),},// 使用 proxy 实例'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,configure: (proxy, options) => {// proxy 是 'http-proxy' 的实例}},// 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io// 在使用 `rewriteWsOrigin` 时要特别谨慎，因为这可能会让代理服务器暴露在 CSRF 攻击之下'/socket.io': {target: 'ws://localhost:5174',ws: true,rewriteWsOrigin: true,},},},
})

三、总结

本次博客主要记录一下在学习Vue过程中，创建项目的过程以及Vite服务器的基本配置，其中跨域问题，需要代理服务器的配置，那四种配置对应第四种还不是很理解，博客还有待完善。