Vite + Vue3 + TS项目创建与配置

72 阅读 0 评论 48 点赞

我是靠谱客的博主尊敬酒窝，最近开发中收集的这篇文章主要介绍Vite + Vue3 + TS项目创建与配置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Vite官方中文文档：https://cn.vitejs.dev/guide/

文章目录

1 项目创建
2 使用scss
3 设置路径别名
4 配置vue-router
5 开发服务器代理

1 项目创建

npm create vite@latest
切换至项目目录下，安装初始环境依赖
npm i
npm run dev 直接就能跑了

2 使用scss

npm add -D sass

设置scss全局变量

// vite.config.ts
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/style/variables.scss";' //这边用了路径别名
      },
    },
  }
})

3 设置路径别名

vite初始化项选择了ts，引入"path"模块时便会导致ts类型检查提示错误，找不到模块“path”或其相应的类型声明
解决办法：
npm i @types/node -D

// 安装完毕，tsconfig.node.json会自动添加
"compilerOptions": {
  ...
  "allowSyntheticDefaultImports": true
},

路径别名设置

// vite.config.ts
...
import { resolve } from 'path'

export default defineConfig({
  ...
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, 'src') }], 
  }
})

//tsconfig.json 导入文件时，识别
  "compilerOptions": {
	...
    "baseUrl": ".", // 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
    "paths": { // 用于设置模块名到基于baseUrl的路径映射
        "@/*": ["src/*"]
    }
    ...

4 配置vue-router

vue-router官方中文文档：https://router.vuejs.org/zh/introduction.html

安装
npm install vue-router@4
创建路由配置文件
（我习惯的目录结构）

- src
- - router
- - - index.ts
- - - routes.ts

// index.ts
import {createRouter, createWebHashHistory} from "vue-router"
import {routes} from "./routes"

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

// routes.ts
const routes = [
  {
    path: "/",
    redirect: "/home"
  },
  {
    path: "/home",
    name: "home",
    component: () => import("@/views/Home.vue")
  }
]
export {routes}

app使用路由中间件

// main.ts 
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"

createApp(App).use(router).mount('#app')

5 开发服务器代理

全栈开发的时候，我们通常会在本地开启两个服务，一个跑客户端（如vite），一个跑后台（如express）；因为服务端口不同，通常会有跨域问题。借助vite配置文件里的服务器代理，可以变相地转化为服务器之间的互相请求，以解决跨域问题。
（发布之后，本地的请求就不存在了，异地的用nginx代理下就行了）

官方文档：https://cn.vitejs.dev/config/server-options.html#server-proxy

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
})