vite 配置 vite.config.js

popop
1,485 阅读6分钟

vite 官网

  • 官网写的还是很详细的 但是初学的话可能看的不是很懂 还是建议自己找一套视频教程先看
  • 我这里就是记录一下 打包肯能会用到的配置 类似于笔记的作用 大致讲解一下

git 配置地址

base

  • base: './'

  • 开发或生产环境服务的公共基础路径。合法的值包括以下几种：

    • 绝对 URL 路径名，例如 /foo/
    • 完整的 URL，例如 https://foo.com/
    • 空字符串或 ./（用于开发环境）

alias

  • 配置别名 两种写法
  • import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 安装 @types/node -S
​
export default defineConfig({
  base: './',
  plugins: [vue()],
  resolve: {
    alias: {
      comp: resolve(__dirname, 'src/components')
    }
  },
})
​
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path' // 这里采用别名 引入 path 
export default defineConfig({
  base: './',
  plugins: [vue()],
  alias: {
    '@': path.resolve(__dirname, 'src'),
    comp: path.resolve(__dirname, 'src/components')
  }
})
​
  • 小坑 静态资源别名可能不能使用 绝对路径 那么直接后面接相对路径就行了
  • '/icon': './src/assets/icon'
  • "/images":"..."

build

  • 生产环境 移除 console.log()
  • build: {
    minify: 'terser', // 更新了 esbulid 如果使用 build 一定要加上这句
    terserOptions: {
      compress: {
        // 生产环境移除 console
        drop_console: true,
        drop_debugger: true
      }
    }
  }

rollupOptions

          output: {
               chunkFileNames: 'static/js/[name]-[hash].js',
               entryFileNames: 'static/js/[name]-[hash].js',
               assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
           },

plugin

element-plus

  • yarn add element-plus -S

  • 全局引入

    • import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
​
createApp(App).use(ElementPlus).mount('#app')
    • 这种方法不好 因为有很多没有用到的都会打包

  • 按需引入

    • 可能首次加载会很慢

    • image.png

    • yarn add -D unplugin-vue-components unplugin-auto-import

    • import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
​
plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],

  • cdn 引入

    • vite-plugin-cdn-import

    • yarn add vite-plugin-cdn-import --save-dev

    • 还是要用全局引入的写法 在 main.ts 中引入 但是不用引入 css 样式

    • 但是实际上是按需加载的

    • import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
​
plugins: [
    vue(),
    // AutoImport({
    //   resolvers: [ElementPlusResolver()]
    // }),
    // Components({
    //   resolvers: [ElementPlusResolver()]
    // })
    importToCDN({
      modules: [
        {
          name: 'vue', // 因为依赖于 vue 所以要导入 vue 的 cdn
          var: 'Vue',
          path: 'https//unpkg.com/vue@next'
        },
        {
          name: 'element-plus', // element-plus 的包也要一起下载 main.ts 中也要全局导入写法
          var: 'ElementPlus',
          path: 'https://unpkg.com/element-plus',
          css: 'https://unpkg.com/element-plus/dist/index.css'
        }
      ]
    })
  ],

    • 这一种引入 cdn 的方式是可以的 但是下面的这个问题我配了两天了还没解决 有没有大哥知道的 说一下 真的栓Q 呜呜呜呜呜

    • 可能使用其他库（pinia）其他库依赖于 vue vue是 cdn 引入的 会导致到失败

      • 其实引入 cdn 的方式可以压缩打包体积的 像 router vue 都可以使用这种方式 但是要解决这个霸道后请求不到资源的问题

        • 在vite运行build时，默认会把所有的库文件合并到一个大文件中，产生一个打包后的js文件，其中会包含各种库文件，会导致最后打包完成后的文件过大，同时减慢打包速度，这时可以把库文件代码使用cdn访问，加快打包和网页打开速度
        • 首先需要确认的是，vite在开发时使用的是自己的一套机制，也就是将代码转换成浏览器原生可以使用的type="module"，然后让浏览器的js引擎去直接运行js，不再需要使用构建工具打包，所以可以做到秒开
        • 而vite的编译使用的是另外一个开源的包rollup，而且需要注意的是，开发时dev server是不会去使用cdn的代码的，只会引用我们安装的node_modules内部的代码
        • 使用rollup打包，比如我们在自己的库中需要使用第三方库，例如jquery等，又不想在最终生成的打包文件中出现jquery。这个时候我们就需要使用external属性
        • 自带的global只支持iife或者umd打包的库文件，这时候我才恍然大悟，我使用的包都是commonjs打包的（关于各种打包的方式使用大家可以谷歌学习），所以才出现这种问题，其实就是本身不支持（不过经过测试其他方式的好像也不可以，可能就是vite本身的问题吧）

      • 解决方法 www.phpheidong.com/blog/articl…

        • 都没试成功

      • rollup-plugin-external-globals

      • rollup-plugin-commonjs rollup-plugin-external-globals
<!-- <script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/element-plus"></script>
<script src="https://unpkg.com/element-plus/dist/index.css"></script> -->
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import ElementPlus from 'element-plus'
// import * as path from 'path' // 安装 @types/node -S
import { resolve } from 'path' // 安装 @types/node -S
​
// import AutoImport from 'unplugin-auto-import/vite'
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
​
import commonjs from 'rollup-plugin-commonjs'
import externalGlobals from 'rollup-plugin-external-globals'
import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
import viteCompression from 'vite-plugin-compression'
​
const globals = externalGlobals({
  // vue - 这里需要和external对应，这个字符串就是(import xxx from aaa)中的aaa，也就是包的名字
  // Vue - 这个是js文件导出的全局变量的名字，比如说vue就是Vue，查看源码或者参考作者文档可以获得
  vue: 'Vue',
  'element-plus': 'element'
})
​
// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    // AutoImport({
    //   resolvers: [ElementPlusResolver()]
    // }),
    // Components({
    //   resolvers: [ElementPlusResolver()]
    // }),
    importToCDN({
      modules: [
        {
          name: 'vue', // 因为依赖于 vue 所以要导入 vue 的 cdn
          var: 'Vue',
          path: 'https://unpkg.com/vue@next'
        },
        {
          name: 'element-plus', // element-plus 的包也要一起下载 main.ts 中也要全局导入写法
          var: 'ElementPlus',
          path: 'https://unpkg.com/element-plus',
          css: 'https://unpkg.com/element-plus/dist/index.css'
        },
        autoComplete('axios'),
        {
          name: 'vue-router',
          var: 'VueRouter',
          path: 'https://unpkg.com/vue-router@4.0.5/dist/vue-router.global.js'
        }
      ]
    }),
    viteCompression(),
    commonjs()
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      comp: resolve(__dirname, 'src/components')
      // vue: 'https://esm.sh/vue@3.0.6',
      // 'element-plus': 'https://unpkg.com/element-plus'
    }
  },
  build: {
    minify: 'terser', // 更新了 esbulid 如果使用 build 一定要加上这句
    terserOptions: {
      compress: {
        // 生产环境移除 console
        drop_console: true,
        drop_debugger: true
      }
    },
    rollupOptions: {
      external: ['vue', 'element-plus']
      // plugins: [commonjs(), globals]
    }
  }
})
​

      • vite中提供了preview，可以供我们预览编译后的结果

代码压缩

打包图片

  • vite-plugin-imagemin
  • 这个不是很推荐使用 看自己情况吧 打包可能会很长时间 看自己有没有压缩图片的需求
  • 直接跟着文档配置就行了 里面有注意事项
  • yarn add vite-plugin-imagemin -D

  • import viteImagemin from 'vite-plugin-imagemin'
​
export default () => {
  return {
    plugins: [
      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,
            },
          ],
        },
      }),
    ],
  }

共享 vscode 配置

  • 创建的项目里面有 .vscode 这个文件夹

  • 里面通常有两个文件

    • 1.extensions.json
    • {
  "recommendations": ["Vue.volar"]
}
    • 这里面可以记录要使用的插件
    • 别人拉取项目的时候 通过 插件安装市场 筛选 推荐 就能找到这个项目所推荐的插件了
    • 2.setting.json
    • 这个就是 vscode 的配置了 这个优先级 是项目内配置的 高于本地的 如果项目中没有就会去找本地的
    • 很好用

心得

  • 1.配置 vite.config.js 里面要使用的插件 一定要去 github 上面找 并且使用 官方文档
  • 2.如果自己配置有问题 可以看看 别人提的 issues 可能会有自己一样的问题 并且有解决方法
  • 3.可以去 github 上面找一些别人的项目作为参考
  • 4.自己可以根据自己的需求去寻找自己的配置 这样自己也能自己配置出自己的项目
  • 5.可能会遇到很多坑 会花很多时间 自己也可以把自己遇到的坑总结 分享啊
avatar
文章
阅读
粉丝