vite-vue3项目使用@别名和自定义端口号以及解决跨域

目录

一、自定义端口号

1.1 默认端口号 ，基于vite创建的vue3项目默认端口号为5173

1.2 自定义端口

二、使用@别名 来代表src目录​编辑

 2.1 安装 @types/node

2.2 在vite.config.ts里面配置resolve

2.3 @别名爆红解决

---

一、自定义端口号

1.1 默认端口号 ，基于vite创建的vue3项目默认端口号为5173

1.2 自定义端口

找到 在vite.config.ts里面配置server

重启一下服务，看看是否生效

二、使用@别名 来代表src目录

   可以看出我们使用..来代表当前项目的src 可读性不好，所以要在使用@符号来代替当前项目的src目录。

 2.1 安装 @types/node

@types/node 包允许您在TypeScript项目中使用Node.js的核心模块和API，并提供了对它们的类型检查和智能提示的支持。

npm install @types/node --save-dev

2.2 在vite.config.ts里面配置resolve

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入path
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 自定义端口号和解决跨域问题
  server: {
    port: 5000,
    proxy: {
      "/api": { target: "http://localhost:8080/", changeOrigin: true },
    },
  },
  resolve: {
    // 配置路径别名， @就代表当前项目的绝对路径 
    // __dirname是一个全局变量，表示当前模块所属目录的绝对路径
    // path.resolve返回一个以相对于当前的工作目录（working directory）的绝对路径, 
    // 比如当前工作目录为 D:\205\wms-web 那么 @ 就代表 D:\205\wms-web\src
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  },
})

 

2.3 查看是否成功，首先进入路由的index.ts里，将原来的..代替为@

重新运行发现可以正常运行，但是代码会爆红，影响心情，怎么办呢？

2.3 @别名爆红解决

如果提示有标红波浪,在tsconfig.json 添加如下代码.

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