vite+vue 开发后台管理系统

一、项目介绍

  1. 基于 vite+vue3+typescript+element-plus+axios+sass+vuex+vue-router+pinia+vite-plugin-svg-icons 等技术栈开发。

二、配置文件

1、vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: { //这里配置vite的别名设置，路径跟tsconfig.json配置保持一致
      "@": resolve(__dirname, "src"),
      "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
    },
    server: { //这里配置本地运行地址、端口号、代理等信息
      port: 3000,
      host: "127.0.0.1",
      proxy: {
        "/api": {
          target: "http://localhost:8080",
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  },
});

2、tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@": ["src"], //这里配置ts的别名设置,跟vite.config.ts中的alias配置保持一致
      "@/*": ["src/*"] //这里配置ts的别名设置,跟vite.config.ts中的alias配置保持一致
    },
    "module": "ESNext", //配置这两项确保可以通过import.meta.evn的方式访问环境变量
    "moduleResolution": "Node"
  }
}