如何使用vite搭建 reacr / vue 项目详解

一路向阳~负责的男人

已于 2022-09-03 11:42:26 修改

阅读量173

点赞数

文章标签： javascript 前端 vue.js

于 2022-09-03 10:08:45 首次发布

本文链接：https://blog.csdn.net/weixin_43416349/article/details/126672011

版权

react 同理，针对 TS 代码。

一：更改http://localhost:3000/到8080与Network路由访问

在vite.config.ts里面加入：（server对象为新增，其他均是原有代码）

1

2

3

4

5

6

7

8

9

10

11

12

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'



// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue()],

  server:{

    host:'0.0.0.0',//解决vite use--host to expose

    port:8080,

    open:true

  }

})

二：配置vite别名（npm install @types/node --save-dev）

在tsconfig.json里面加入：
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths":{
      "@": ["src"],
      "@/*": ["src/*"],
    }
  },
}
在vite.config.ts里面加入：（resolve对象为新增)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import { resolve } from 'path'



// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue()],

  server:{

    host:'0.0.0.0',//解决vite use--host to expose

    port:8080,

    open:true

  },

  resolve:{

    alias:[

      {

        find:'@',

        replacement:resolve(__dirname,'src')

      }

    ]

  }

})