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, // 是否开启 https
        cors: 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, // 在服务器启动时自动在浏览器中打开应用程序,也可以指定url
        strictPort: false, // 设为 false 时，若端口已被占用则会尝试下一个可用端口,而不是直接退出
        https: false, // 是否开启 https
        cors: 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服务器的基本配置，其中跨域问题，需要代理服务器的配置，那四种配置对应第四种还不是很理解，博客还有待完善。