【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）

结合了很多项目和文章，总结一篇项目构建的笔记
温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~

项目搭建步骤

确定node版本

我是用的是当前最新的稳定版

使用Vite创建Vue3项目

1、执行 npm create vite@latest 创建项目

2、按照以下步骤，选择创建vue项目，使用TypeScript语言。

如下输出，就说明项目创建成功了。

创建项目名称——vue3-ts-test

使用的框架：Vue3

使用的语言：TypeScript

用vscode打开项目

npm install下载初始化依赖包

npm run dev运行项目

规范目录结构

----|src                     
--------|api                 # 接口请求目录
--------|assets              # 静态资源目录
--------|axios               # axios封装目录
----------|service.ts
--------|components          # 公共组件目录
--------|hooks               # vue3-hooks函数目录
--------|locales             # 语言版本目录
----------|en                # 英文版本
------------|index.ts        # 
----------|zh                # 中文版本
------------|index.ts        # 
--------|router              # 路由配置目录
--------|store               # 状态管理目录
--------|types               # 集中管理类型
--------|utils               # 工具函数目录
--------|views               # 页面组件目录
----|App.vue             
----|main.ts             
----|.env.development      
----|.env.production      
----|.env.test        
----|package.json    
----|vite.config.ts  

配置环境

1、配置开发、线上和测试环境

.env.development

NODE_ENV = "development"	

# 是否兼容旧的浏览器
VITE_LEGACY = false

# 开发环境网站前缀
VITE_BASE_URL = /

# 开发环境后端地址
VITE_BASE_API = "http://xx.xx.xx.xx:xxxx/"

.env.production

# 线上环境
NODE_ENV = "production"

# 是否兼容旧的浏览器
VITE_LEGACY = false

# 线上环境网站前缀
VITE_BASE_URL = /

# 线上环境后端地址
VITE_BASE_API = "http://xx.xx.xx.xx:xxxx/"

.env.test

# 测试环境
NODE_ENV = "test"

# 是否兼容旧的浏览器
VITE_LEGACY = false

# 测试环境网站前缀
VITE_BASE_URL = /

# 测试环境后端地址
VITE_BASE_API = "http://xx.xx.xx.xx:xxxx/"

2、安装cross-env
cross-env：运行跨平台设置和使用环境变量的脚本

windows不支持NODE_ENV=development的设置方式。这个迷你的包(cross-env)能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。

npm install cross-env --save-dev

3、配置package.json

    "scripts": {
   
    "dev": "vite",
    "dev-prod": "vite --mode production",
    "dev-test": "vite --mode test",
    "build": "vue-tsc && vite build",
    "build:prod": "cross-env NODE_ENV=production BASE_ENV=production webpack -c build/webpack.prod.js",
    "build:test": "cross-env NODE_ENV=test BASE_ENV=test webpack -c build/webpack.test.js",
    "preview": "vite preview"
  },

修改Vite配置文件

1、修改文件内容如下

import {
    loadEnv } from 'vite'
import type {
    UserConfig, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到，需要安装一下 @types/node --> npm i @types/node -D
import {
    resolve } from 'path'

// https://vitejs.dev/config/
export default ({
    command, mode }: ConfigEnv): UserConfig => {
   

  const {
    VITE_BASE_URL, VITE_BASE_API } = loadEnv(
    mode,
    process.cwd()
  )

  return {
   
    base: VITE_BASE_URL,
    plugins: [vue()],
    resolve: {
   
      alias: {
   
        //设置'@'指向'src'目录
        '@': resolve(__dirname, './src')
      },
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
    },
    server: {
   
      port: 8089, //设置服务启动端口号
      open: true, //设置服务启动后是否自动打开浏览器
      cors: true, //允许跨域
      //设置代理
      proxy: {
   
        '/api': {
   
          target: VITE_BASE_API, //设置代理目标
          changeOrigin: true, //是否修改目标源
          // rewrite: (path) => path.replace(/^\/api/, '') //设置路径重写
        }
      }
    }
  }
}

2、安装@types/node 模块，在 tsconfig.json 中设置 paths
npm i @types/node -D

{
   
  "compilerOptions": {
   
    ...
    "noFallthroughCasesInSwitch": true,
    "paths": {
   
      "@/*": [
        "./src/*"
      ]
    }
  },
}

3、在vite.config.ts中添加如下配置

import {
    resolve } from 'path'
export default defineConfig({
   
  plugins: [vue()],
  resolve: {
   
    alias: {
   
      '@': resolve(__dirname, './src')
    },
    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
  }
})

集成路由工具Vue Router

1、安装vue-router

npm i vue-router@4

2、测试路由案例：

（1）创建src/views/Login.vue文件

<template>
  <div @click="toLogin">登录</div>
</template>

<script lang="ts" setup>
import {
    useRouter } from 'vue-router'

const router = useRouter()
function toLogin() {
   
  console.log('登录ing');

  router.push({
   
    name: 'dataAll'
  })
}
</script>

（2）创建src/views/DataAll.vue文件

<template>
  <div @click="toLogin">
    首页
  </div>
</template>
<script>

function toLogin() {
   
  console.log('首页ing');
}

</script>

（3）创建 src/router/index.ts 文件

// 路由配置文件
import {
   
  createRouter,
  createWebHashHistory,
  RouteRecordRaw
} from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
   
    path: '/',
    redirect: '/login'
  },
  {
   
    path: '/login',
    name: 'login',
    component: () => import('@/views/Login.vue') // 懒加载组件
  },
  {
   
    path: '/dataAll',
    name: 'dataAll',
    component: () => import('../views/DataAll.vue') // 懒加载组件
  },
]

const router = createRouter({
   
  scrollBehavior: () => ({
    left: