【使用vite创建echarts项目】

原创

已于 2025-07-17 21:05:43 修改 · 570 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2025-03-09 08:13:38 首次发布

使用vite创建echarts项目

创建项目

创建项目

pnpm create vite chinabuilder-vue

环境变量

开发环境
.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())// 根据 mode 加载对应的 .env 文件

  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 = [

];

const router = createRouter({
   
   
    history: createWebHistory(),
    routes: constantRoutes,
    // 刷新时，滚动条位置还原
    //scrollBehavior: () => ({ left: 0, top: 0 }),
    scrollBehavior(to, from, savedPosition) {
   
   
        if (savedPosition) {
   
   
            return savedPosition;
        } else {
   
   
            return {
   
    top: 0 };
        }
    },
});

export default router;

配置主应用（App.vue）
路径: src/App.vue

<template>
  <div id="app">
    <router-view /> <!-- 用于显示路由组件 -->
  </div>
</template>

<script setup>

</script>

在 main.ts 中挂载路由
路径: src/main.ts

import {
   
    createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 引入路由

const app = createApp(App)

app.use(router) // 使用路由

app.mount('#app')