搭建自己的vue3脚手架

前言

我们每次搭建一个新的项目时，总要去配置那些常用的工具模块。重复去配置就会觉得非常麻烦，当然会有很多开源的脚手架，比如vue的脚手架vue-cli等，脚手架为我们完成项目初始化的基础配置和一些必要的模块引入及配置，我们在此基础上再做项目和依赖的定制就省了很多事，懒人必备。

脚手架配置的内容

• vite的基础配置
• i18n多语言方案
• 多主题方案
• axios请求封装
• router路由封装配置
• vue全局组件封装注册
• vuex配置
• 静态资源配置
• 多环境发布配置

以上配置都做到开箱即用，让我们直接投入到生产中去，再不要担心配置问题版本问题了。
通过vite创建我们的脚手架项目

yarn create vite

在命令行选择vue项目框架 选择vue-ts

vite.config.ts构建工具配置

这里做一些打包构建的配置,脚手架这里就做一些项目常用的基础配置就好了，以后用的时候再根据需求二次定制

引入scss预编译样式
设置静态资源
设置代理
多语言依赖导入
常用便于开发的配置

import {
    defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueI18n from "@intlify/vite-plugin-vue-i18n";
import path from "path";
// vite 首次加载慢且报错---添加缓存插件
import OptimizationPersist from "vite-plugin-optimize-persist";
import PkgConfig from "vite-plugin-package-config";
import vueJsx from "@vitejs/plugin-vue-jsx";

const {
    resolve } = require("path");

// https://vitejs.dev/config/
export default defineConfig({
   
  // 引入自定义主题
  css: {
   
    preprocessorOptions: {
   
      // 导入scss预编译程序
      scss: {
   
        additionalData: `@use "@/styles/modules/element/themeCommon.scss" as *;`,
      },
    },
  },
  plugins: [
    PkgConfig(),
    OptimizationPersist(),
    vue(),
    vueJsx(),
    vueI18n({
   
      include: path.resolve(__dirname, "./src/utils/locales/**"),
    }),
  ],
  // 设置为打包资源相对路径，默认绝对
  base: "./", //
  // 静态资源服务的文件夹, 默认"public"
  publicDir: "public",
  // 配置别名
  resolve: {
   
    alias: {
   
      "@": path.resolve(__dirname, "src"),
    },
  },
  // 打包构建环境
  build: {
   
    outDir: "dist",
    rollupOptions: {
   
      input: {
   
        main: resolve(__dirname, "index.html"),
      },
    },
  },
  server: {
   
    port: 8080,
    proxy: {
   
      // 配置代理 gapi
      "/gapi": {
   
        target: "https://lcplatdev.zkcserv.com",
        change