【使用vite创建echarts项目】

创建项目

pnpm create vite echarts

环境变量

开发环境
.env.development

NODE_ENV=development

VITE_APP_TITLE=ZongLiaTools开发环境

VITE_SERVE=http://localhost:8080/

VITE_APP_BASE_API=/api

生产环境
.env.production

NODE_ENV=production

VITE_APP_TITLE=ZongLiaTools生产环境


VITE_SERVE=http://xxx.xxx.xxx.xxx:18080/

VITE_APP_BASE_API=/api

配置 @ 作为 src 目录的别名

Vite 配置文件中出现 找不到名称"path" 的错误，是因为 ​未正确引入 Node.js 的 path 模块，且 ​TypeScript 缺乏 Node.js 类型声明。
Vite 配置文件运行在 Node.js 环境下，所以需要 @types/node 提供类型支持：

pnpm add -D @types/node

vite.config.ts

import {
    defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig(({
    mode }) => {
   
  
  const env = loadEnv(mode, process.cwd())

  return {
   
    plugins: [vue()],
    resolve: {
   
      alias: {
   
        '@': path.resolve(__dirname, 'src') // 让 @ 代表 src 目录
      }
    },
  }
})

tsconfig.app.json

 "compilerOptions": {
   
	......
    // 配置别名
    "baseUrl": ".",
    "paths": {
   
      "@/*": ["src/*"]
    }
  },

让 TypeScript 能够识别 .vue 文件的导入

vite-env.d.ts

/// <reference types="vite/client" />

// 声明所有 .vue 文件
declare module '*.vue' {
   
    import {
    DefineComponent } from 'vue'
    const component: DefineComponent<{
   }, {
   }, any>
    export default component
}

使用 Vue Router 来管理应用的路由

pnpm add vue-router

在 src/router文件夹下，创建 index.ts 文件

import {
    createWebHistory, createRouter } from "vue-router";

/* Layout */
export const Layout = () => import("@/layout/index.vue");

// 公共路由
export const constantRoutes = [

    // 首页
    {
   
        path: "/",
        component: Layout,
        redirect: "/index",
        children: [
            {
   
                path: "index",
                component: () => import("@/views/index.vue"),
                name: "Index",
                meta: {
    title: "首页", icon: "dashboard", affix: true }
            }
        ]
    },
];

// 动态路由，基于用户权限动态去加载
export const dynamicRoutes = [