❤ 项目配置

接下来我们就对我们的项目进行一些基础的配置，方便我们开发

公共路径@配置

很多时候我们引入项目之中的资源和图片都是在src目录下的子目录，用相对路径非常麻烦，所以我们使用@来定位我们的src目录下的资源

👉 前提：先安装类型包

npm install @types/node --save-dev
// 或者
yarn add @types/node --save-dev

（1）引入路径和定位跟目录

☞ 打开根目录下的vite.config.ts进行配置，使用@来定位我们的src目录下的资源

下面的src就是我们想要配置的地址

// vite.config.ts
resolve: {
    // 解决公共路径问题
    alias: {
        '@': path.resolve(__dirname, 'src')
    }
},

（2）vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
export default defineConfig({
    plugins: [vue()], //官方给我们提供的插件
    resolve: {
        // 解决公共路径问题
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
})

使用的时候只要记得@就是我们的src就可以了

import { login } from "@/api/login";

下面提示是没有安装类型包（也就是我们的前提条件部分）

找不到名称“__dirname”

👉 import * as path from 'path' 和 import path from 'path'的区别

上面导入path的模块我们使用import * as path from 'path'原因：

两个命令区别就是TypeScript或 JavaScript 中如何导入模块，模块的默认导出和命名导出的差异（有没有默认导出的模块）

import path from 'path'

path模块有一个默认导出（export default），并将该默认导出绑定到 path 上

适用于有默认导出的模块

import * as path from 'path'

会导入整个 path 模块的命名空间，并将其绑定到 path 对象上

适用于Node.js 模块的多重导出（vite适用）

配置Vite跨域以及接口

Vite 配置代理 Proxy，解决跨域

首先我们先把接口的全局给放入一个公告的文件夹下面进行使用 在utils下面新建一个文件config.js，接下来公共参数放入这个里面 config.js 然后更改一下我们的 vite.config.js 这个文件

👉server信息

// vite.config.js
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// vite 相关配置
export default defineConfig({
    server: {
        host: true, //host设置为true才可以使用network的形式，以ip访问项目
        port: 8808, // 端口号
        https: false,
        open: false, //  true 自动打开浏览器自动打开浏览器
        cors: true, // 跨域设置允许
        strictPort: true,  // 如果端口已占用直接退出
        proxy: {
            '/edu-pc': {
                target: 'http://要链接的后台地址', //线上版本
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/接口统一前缀/, '/接口统一前缀c')
            },
        },
    },
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
})

配置host

server: {
      host: '0.0.0.0',
      port: 66,  // 设置端口号
      proxy: {
          "/api": {
              target: "http://localhost:8888",
              changeOrigin: true,
              rewrite: (path) => path.replace(/^\/api/, ""),
          },
      },
},

host: '0.0.0.0'是服务器配置，作用是定义服务器的绑定 IP 地址。

通常我们在局域网中共享开发环境，或进行跨设备调试时会使用 host:'0.0.0.0'：代表服务器绑定到所有可用的网络接口（所有IP地址）。我们的开发服务器不仅可以在本地的 localhost 或 127.0.0.1（即本机回环地址）上访问，还可以通过局域网中的其他设备使用该 IP 地址访问。

开发服务器会监听并响应来自其他设备（同一个局域网内的设备）发出的请求。