vite.js vue.js

创建项目

npm init @vitejs/app
#    "dev": "vite", // 启动开发服务器
#    "build": "vite build", // 为生产环境构建
#    "serve": "vite preview" // 本地预览生产构建产物
npm create vite-app my-project

配置路由

// router/router.js 创建 
import { createRouter,createWebHistory } from "vue-router"
const route = [ 
  {path:"Home",name:"Home",component:()=>import("../view/Home.vue")}
] 
const router =  createRouter({
    history:createWebHistory(),
  router
})
export default router
// main.js 修改
import router from "./router/router.js"
createApp(App).use(router).mount("#app")

使用vuex

// store/index.ts
import { createStore } from "vuex";
export default createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit("increment");
    },
  },
});
// main.js
import store from "/@/store";
app.use(store);

vite.js 配置文件

    // Build 独有配置
    'base': './',
    'mode': 'production',
    // 默认值
    'publicDir': 'public',
    'resolve': {
      'alias': [
        { find: '/@', replacement: resolve(__dirname, "./src") },
      ],
    },
    'plugins': [
      //https://github.com/anncwb/vite-plugin-style-import/blob/HEAD/README.zh_CN.md
      vue({
        'template': {
          'compilerOptions': {
          }
        },
        // \@vicons\antd\SettingOutlined.js
        // \@vicons\antd\es\index.js
      }), styleImport({
        libs: [
          {
            libraryName: '@vicons/fa',
            esModule: true,
            resolveStyle: (name) => {
              return `@vicons/fa/${name}`;
            },
          }, {
            libraryName: '@vicons/material',
            esModule: true,
            resolveStyle: (name) => {
              let a = name.split("-")
              let ar = a.map(str => { return str.trim().toLowerCase().replace(str[0], str[0].toUpperCase()); })
              let str = ""
              ar.map(itme => { str += itme })
              return `@vicons/material/${str}`;
            },
            resolveComponent: (name) => {
              let a = name.split("-")
              let ar = a.map(str => { return str.trim().toLowerCase().replace(str[0], str[0].toUpperCase()); })
              let str = ""
              ar.map(itme => { str += itme })
              return `@vicons/material/${str}`;
            },
          }
        ]
      })
    ],
    'css': {
    },
    // 'brotliSize': true,
    // chunkSizeWarningLimit: 100000,
    'server': {
      // 指定服务器主机名
      'host': '',
      // 代理规则
      'proxy': {
        // 字符串简写写法
        '/foo': 'http://localhost:5000/foo',
        // 选项写法
        '/api': {
          'target': 'http://jsonplaceholder.typicode.com',
          'changeOrigin': true,
          'rewrite': path => path.replace(
            /^\/api/,
            ''
          )
        },
        // 正则表达式写法
        '^/fallback/.*': {
          'target': 'http://jsonplaceholder.typicode.com',
          'changeOrigin': true,
          'rewrite': path => path.replace(
            /^\/fallback/,
            ''
          )
        }
      }
    }

文件路径别名

    'resolve': {
      'alias': [
        { find: '/@', replacement: resolve(__dirname, "./src") },
      ],
    },

插件

ite 插件扩展了设计出色的 Rollup 接口，带有一些 Vite 独有的配置项。因此，你只需要编写一个 Vite 插件，就可以同时为开发环境和生产环境工作。

Rollup文档

Rollup 是一个用于 JavaScript 的模块打包器，它将小段代码编译成更大更复杂的东西，比如库或应用程序。它对包含在 JavaScript 的 ES6 修订版中的代码模块使用新的标准化格式，而不是以前的特殊解决方案，例如 CommonJS 和 AMD。ES 模块让您可以自由无缝地组合您最喜欢的库中最有用的单个功能。这最终在任何地方都可以实现，但是 Rollup 让你今天就可以做到。

按需导入 vite-plugin-style-import

文档地址

// 导入
import styleImport from 'vite-plugin-style-import';
'plugins': [
    vue({ 'template': {  'compilerOptions': { }  }, }), 
  styleImport({
        libs: [
        // import { Home } from "@vicons/fa";
        // \@vicons\antd\es\index.js
        // \@vicons\antd\SettingOutlined.js
          {
            libraryName: '@vicons/fa',
            esModule: true,
            resolveStyle: (name) => {
              return `@vicons/fa/${name}`;
            },
          }
          }
        ]
      })
    ],

• vite-plugin-importer 可以按需加载组件和组件样式。
• vite-plugin-style-import 只能按需加载组件样式。