Vite的一些小配置

Vite是Vue3用来替代webpack的一种代码打包工具，其对比之前的webpack来讲在代码层面会更快 更轻 ；

其一些相关详情可以去官网或者度娘去详细了解，在这里就不过多介绍了

Vite官网链接：Vite中文网

一、配置 @ 符号

1、在vite.config.js 文件夹中的配置

// vite.config.js 
import { resolve } from "path"

// 使用项目搭配的是 TS 的话要先下载 @types/node，不然 path 是会报错不生效的哦
// npm install -D @types/node

export default defineConfig({
  plugins: [vue(),],
    // 配置 @ 符号
  resolve: {
    alias: {
      "@": resolve(__dirname, "src")// 在src文件下的相对路径都可以写成 @ 符号
    }
  },

})

2、在tsconfig.json 的配置（没用到ts的可以忽略这一条）

{
  "compilerOptions": {
    ......
   "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
       "#/*": ["types/*"]
    },
  },

二、显示本地局域网地址

Vite的话项目跑起来是不会显示本地局域网地址的，只会显示 http:// localhost:3000/

在 vite.config.js  可以使用 server 来显示本地局域网地址

// vite.config.js 

export default defineConfig({
  plugins: [vue(),],
    // 配置 @ 符号
  resolve: {
    alias: {
      "@": resolve(__dirname, "src")
    }
  },
//显示本地局域网地址
 server: {
    host: "0.0.0.0"
  }

})