img src使用变量

imgUrl: new URL('../../../../../assets/icons/guide/main-table.svg', import.meta.url).href,

动态引入指定文件夹下的文件以及动态使用组件

blog.csdn.net/xixihahakky… 1.问题
在做一个用vite构建的vue3项目时，动态拉取导入.vue页面，然后控制台一直有以下提示，页面也无法渲染出来。

2.分析根据上面的报错提示，让我们安装并使用：@rollup/plugin-dynamic-import-vars 这个插件（最终没有这个方案）。

Vite官方文档说需要使用Glob 导入形式，然后看了一个Glob的文档，解决了这个问题（亲测可行）。

首先需要使用特殊的import.meta.glob函数从文件系统导入多个模块：

他会匹配并导入所有相关的组件：

那么回到项目中，在home文件夹下的index.vue文件中导入custom_components文件夹下的所有.vue文件

因此，根据vite的import.meta.glob函数：就可以获得对应的custom_components文件夹下的.vue文件

打印link可以看到

最后就是异步注册组件

3.最后
下面贴出完整案例，仅供参考。有更好的或者需要优化的可以提问一起探讨。

项目中实际应用

兼容低版本浏览器（blog.csdn.net/Mr_JavaScri…

这个可以解决firefox 引入的elementplus正则报错问题配合使用

别名

{ "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "skipLibCheck": true, "lib": [ "esnext", "dom" ], "types": [ "node", "vite/client" ], "baseUrl": ".", "paths": { "@/": [ "src/" ], "#/": [ "src/@types/" ], "exploremodel/": [ "src/views/model/model/explore/exploremodel/" ] } }, "include": [ "src//*.js", "src//.ts", "src/**/.d.ts", "src//*.tsx", "src//.vue" ], "exclude": [ "node_modules", "dist", "**/.js" ], "references": [ { "path": "./tsconfig.node.json" } ] }

静态资源的别名(上面传统方式开发不可以打包完可以)

生产环境移除console.log

跨域

环境变量

.env.development .env.production

官网

配置启动命令

elementplus cdn引入 (也需要安装elementpuls插件)比自动引入和按需引入要快体积要小(自动引入要自己引入css,cdn引入在vite.config.js配置即可)

...... 1.引入elementpuls

4. 5.打包后会报错添加vue-demi(pinia等用到了)

打包压缩

压缩图片(压缩完没有区别,可以拿出来在压缩,项目里可以使用压缩后的图片)

  viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false,
        },
        optipng: {
          optimizationLevel: 7,
        },
        mozjpeg: {
          quality: 20,
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4,
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox',
            },
            {
              name: 'removeEmptyAttrs',
              active: false,
            },
          ],
        },
      }),

格式化

同一份代码格式化一致 {(extensions.json) "recommendations": [ "vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "stylelint.vscode-stylelint", "editorconfig.editorconfig", ] } {(settings) "files.eol": "\n", "editor.tabSize": 2, "editor.formatOnSave": true, "eslint.enable": true, "typescript.tsdk": "node_modules/typescript/lib", "javascript.updateImportsOnFileMove.enabled": "always", "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }, "editor.unicodeHighlight.allowedLocales": { "zh-hant": true, "zh-hans": true }, "editor.defaultFormatter": "esbenp.prettier-vscode", "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "stylelint.validate": [ "css", "less", "postcss", "scss", "vue" ], "css.validate": false, "less.validate": false, "scss.validate": false } {(vue3.code-snippets)代码片段 "vue3 snippets": { "scope": "vue", "prefix": "vue3", "body": [ "", "", "<script lang="ts">", "export default {", " name: '${TM_FILENAME_BASE}Page',", "};", "", "", "<script setup lang="ts">\n", ], "description": "vue3 snippets" } }

前端代理

vite.config.js里语法提示

方法一: import {defineConfig} from 'vite' export default defineConfig ({}) 方法二: /** @type import ('vite').UserConfig */ const viteConfig = { } 官网推荐

规范注释

/**

@params
@return {string}//返回的类型是string
/

生产环境和开发环境不同的vite.config.js

vite