乐趣区

关于vue.js:聊聊我是怎么样用vite替换webpack的

jiezi

highlight: a11y-dark

前言

都曾经 2202 年了，vite曾经能够算是遍地开花了，这两年的关注度也比拟高究其原因，还是因为苦 webpack 久矣；

随着我的项目性能越来越多，代码越来越简单，随之而来的就是我的项目的各种慢（ps: 跑个我的项目的工夫都能去茶水间打杯水回来喝一会儿了 😭😭😭）

至于起因，简短来说，就是 webpack 须要去索引整个我的项目的文件，编译成一个或多个独自的 js 文件；而 vite 则是在浏览器申请对应 URL 的时候，再提供对应的文件，更具体的还是去瞅瞅 vite 的自荐吧

开搞

开始进入正题

1. 批改我的项目配置

终端输出 npm i -D vite 装置 vite

批改 pageage.json 中的相干命令

"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"

2. 在根目录创立 vite.config.js 文件

import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
import path from 'path'

export default defineConfig({
  base: './',
  plugins: [createVuePlugin()],
  server: {open: true // 启动实现之后主动关上浏览器},
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      } // 应用这种形式能够引入.vue 文件，然而图片会 404
      {
        find: '/@',
        replacement: 'src'
      }, // 解决图片应用别名 404，@符号后面须要加 '/', 也没有用绝对路径
    ]
  }
})

3. 批改环境变量

在 vite 中曾经不反对原来的 process.env 来拜访环境变量了

须要改为 import.meta.env 来拜访，在.env 文件中的变量也须要把前缀改为 VITE_（ps: 也能够通过在vite.config 中设置 envPrefix 来自定义前缀）

如以下代码：

VITE_APP_API_URL=/api
VITE_TITLE=title

4. 配置全局的 css 变量

在 vue-cli 中是借助了 style-resources-loader 来实现的全局变量，在 vite 中间接通过  css.preprocessorOptions  就能够进行配置

css: {
  preprocessorOptions: {
    less: {additionalData: `@import './src/assets/style/variables.less';`}
  }
}

5. 批改 index.html 文件

首先将 public 文件夹下的 index.html 挪动到根目录

在 index.html 中引入 src 目录下的 main.js 文件

<script type="module" src="/src/main.js"></script>

还有一个就是 vite 默认不反对 ejs 的语法（ps: 其实有尝试用过 vite-plugin-html 插件，然而会启动报错 😛😛），在以后我的项目中也没有实际性的意义，就不折腾啦，所以改为了原生写法

- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title><%= VUE_APP_NAME %></title>
# 改为了上面这样
+ <link rel="icon" href="./favicon.ico">
+ <title>Title</title>

做完下面几步，就能够输出 npm run dev 来运行我的项目了

遇到的一些问题

1. 不反对 require

重写 require 的办法来引入图片

// 因为只有图片引入还在应用 require，所以就只用于图片引入了
window.require = url => {if (typeof url === 'undefined') return
  return new URL(url, import.meta.url).href
}

局部插件是用 require 来加载的，对立改为 import 来引入

// const CodeMirror = require('codemirror/lib/codemirror')
// require('codemirror/addon/hint/show-hint')
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/addon/hint/show-hint'

2. TypeError: Failed to fetch dynamically imported module

起因的话是因为 vite 不反对对 .vue 后缀的辨认，在引入组件的文件门路上补充 .vue 后缀就好啦

退出移动版