<%= webpackConfig.name %>

前些年开发的Vue项目，基本都是基于webpack构建的，打包构建和开发启动都比较慢，这几年流行了vite，给予了我们这些前端开发攻城狮一个新的选择。今天在这里，我们不讨论如何使用vite构建一个新项目，而是带领大家，将基于webpack构建的Vue2项目一步步修改为基于vite构建，解决运行中出现的问题，使其能正常开发和打包，是不是有些迫不及待了！呵呵，别急，开始之前，我们还是先了解下为什么使用vite和使用Vite有什么要求吧。 # 为什么使用vite Vite 支持原生 ESM 模块（依托现代浏览器）和文件缓存，能够显著提升前端项目的启动和重新构建的速度。 # vite使用要求 vite运行环境需要[node 14.18+ / 16+](https://link.juejin.cn/?target=https%3A%2F%2Fvitejs.cn%2Fvite3-cn%2Fguide%2Fmigration.html) 温馨提醒 - 由于node版本升级，一些依赖包可能存在兼容问题； - 和webpack比起来，vite技术比较新，结合在现有项目，可能会产生一些未意料到的问题； - 建议先用于本地开发联调，测试无误再用此打包上上生产环境。哦，先给大家说一下，由于不是创建vite项目，而是修改一个已经存在的vue2项目，所以肯定会出现一些我们意想不到的情况需要解决，甚至会出现在我们修改了基本的vite配置，搭建好服务器后，项目跑不起来的情况。所以大家得有个心里准备，别想一两步就改好，万事大吉了。好了，知道了这些，接下来就开始我们的修改的征程吧，文笔不好，大家请将就下吧 # 克隆项目克隆原本的项目或者在原本的项目新开个vite分支，用于修改为vite； # 创建vite.config.js 在项目根目录创建vite.config.js（跟原来的 vue.config.js同级），作用就不用我多说了吧，有什么配置都得在里头写。 ```js export default { // 配置选项 } ``` # 安装Vite依赖 Vite官方文档：[插件](https://cn.vitejs.dev/plugins/#plugins) 安装vite、@vitejs/plugin-vue2 ```js npm install vite@latest @vitejs/plugin-vue2 --save-dev ``` 温馨提醒：这里下载的是vite的最新版本，其实截止到目前，下载vite的最新版本会下载到5点几的版本了，5点几的版本并不适配我们vue2的项目，会出错。请允许我暂时打个哑谜，因为后面会讲到。如果你不想后面走这无用功，可现在就下载vite@4.5.3 ```js npm install vite@4.5.3 --save-dev ``` @vitejs/plugin-vue则是为了更好地支持Vue框架的开发而诞生的Vite插件。 @vitejs/plugin-vue旨在支持基于Vite构建的Vue项目，它使用Vue 3的编译器来处理Vue文件，同时也支持在模板中使用Vue.js官方提供的自定义块。该插件还提供了Vue单文件组件（SFC）的加载和解析方式，以及CSS、SCSS等样式语言文件的处理方式。通过使用@vitejs/plugin-vue，开发者可以在Vite工程中无缝地使用Vue框架。而且，@vitejs/plugin-vue的运行速度极快，能够在即时编译和热更新上提供出色的性能表现。在项目中，我们只需要通过npm安装该插件，然后在vite.config.js中配置插件即可使用。而@vitejs/plugin-vue2只作用于Vue@^2.7.0。从Vite官方文档，[插件](https://cn.vitejs.dev/plugins/#plugins) 页面列表我们看到，想要将vue2项目迁移到vite，@vitejs/plugin-vue 没有支持vue版本低于2.7的，所以我们需要升级vue版本到2.7（如果您发现有支持vue2.7以下版本，请给我留言），我个人是喜欢vue2.7的，毕竟vue2.7支持vue3的很多特性，用起来别提有多香。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67ad31453e5d42578be53fbb9753dbcc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1811&h=342&s=101627&e=png&b=0d0d0d) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/373247cf08a04c259106bde2404a55cb~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1699&h=224&s=34649&e=png&b=0c0c0c) ```js npm uninstall vue // 卸载vue@2.6.11 npm install vue@2.7.14 --save // 下载vue@2.7.14 // "vue": "^2.7.14", // ``` 安装了vue@2.7.14 ，vue-template-compiler就可以卸载了 ( vue@2.7以前版本需要和vue配合使用，并且两者版本号最好一致，v2.7以后可以抛弃了) 将@vitejs/plugin-vue2 引入defineConfig 的配置plugins中 ```js import { defineConfig } from 'vite' import Vue from '@vitejs/plugin-vue2' export default defineConfig({ plugins: [ Vue(), ], }) ``` 如果你不知道，一开始就使用了@vitejs/plugin-vue，可能会遇到这样的报错 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/843f970ebff04be7bac9e0711fadb4bd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1098&h=472&s=71717&e=png&b=0c0c0c) 根据上面提示，我们知道了@vitejs/plugin-vue需要在vue版本大于等于3.2.25才能使用 # 配置服务器 Vite官方文档：[开发服务器选项](https://cn.vitejs.dev/config/server-options.html#server-options) devServer 改为 server ，主要功能选项跟在webpack中使用相同，部分配置有差异的，可参考Vite的官方文档【[服务器选项](https://cn.vitejs.dev/config/server-options.html)】修改： ```js // vue.config.js devServer: { port, open: true, overlay: { warnings: false, errors: true } } // vite.config.js server: { open: true, port: port }, ``` # 配置构建选项 Vite官方文档：[构建选项](https://cn.vitejs.dev/config/build-options.html#build-options) 根据文档，整理了一些构建配置在webpack和vite中各自的名称，如下表： | webpack | vite | 说明 | ------------------- | --------------- | ------------------------- | | publicPath | base | 开发或生产环境服务的公共基础路径,用于指定项目中静态资源的基本路径 | | outputDir | build.outDir | 指定输出路径（相对于项目根目录). | | assetsDir | build.assetsDir | 指定生成静态资源的存放路径（相对于 build.outDir）。在库模式下不能使用。 | | productionSourceMap | build.sourcemap | 构建后是否生成 source map 文件 | | lintOnSave | 未查到，有知道的请告诉我 | 用于指定是否在保存文件时执行代码检查（linting）。设置为 `false`，则在保存文件时不会运行 lint 检查，禁用 linting 功能 ```js // vue.config.js module.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static', // lintOnSave: import.meta.env.MODE === 'development', lintOnSave: false, productionSourceMap: false, } // vite.config.js export default defineConfig({ // 开发或生产环境服务的公共基础路径,用于指定项目中静态资源的基本路径 base: './', // 构建选项 build: { // 指定输出路径（相对于项目根目录). outDir: "dist", // 指定生成静态资源的存放路径（相对于 build.outDir）。在库模式下不能使用。 assetsDir: 'static', // 构建后是否生成 source map 文件 sourcemap: false, }, }) ``` # 关于index.html Vite官方文档：[index.html 与项目根目录](https://cn.vitejs.dev/guide/#index-html-and-project-root) 迁移 public/index.html 到根目录（和vite.config.js同级），删除public文件夹，同时修改里面的 webpack变量 BASE_URL、webpackConfig.name，最后在body末尾引入main.js ```js // 在 webpack 项目的 public/index.html <%= webpackConfig.name %> // 在 vite 项目的 index.html ``` # 关于 package.json Vite官方文档：[命令行界面](https://cn.vitejs.dev/guide/#command-line-interface) 1、修改原本的webpack命令 vue-cli-service serve 为 vite ， vue-cli-service build 为 vite build ```js // 在 webpack 项目中 "scripts": { "dev": "vue-cli-service serve", "dev:test": "vue-cli-service serve --mode test", "dev:prod": "vue-cli-service serve --mode production", "build": "vue-cli-service build --mode development", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode production", }, // 在 vite 项目中 "scripts": { "dev": "vite", "dev:test": "vite --mode test", "dev:prod": "vite --mode production", "build": "vite build --mode development", "build:test": "vite build --mode test", "build:prod": "vite build --mode production", }, ``` 2、删除原来项目中跟webpack相关的依赖 ```js "@vue/cli-plugin-babel": "^4.5.0", "@vue/cli-plugin-unit-jest": "^4.5.0", "@vue/cli-service": "^4.5.0", ``` # 关于 configureWebpack 和 chainWebpack configureWebpack 和 chainWebpack 的作用相同,两个都能对webpack进行配置，唯一的区别就是他们修改webpack配置方式不同； configureWebpack 通过操作对象得形式来修改webpack配置，该对象将会被webpack-merge合并到最终得webpack配置中； chainWebpack 是一个函数，会接收一个基于webpack-chain的ChainableConfig实例，通过链式编程的形式来修改默认的webpack配置。讲偏了，回到vue.config.js中的代码 ```js // vue.config.js const CompressionPlugin = require('compression-webpack-plugin') const sftpUploader = require('sftp-uploader') const sftp = new sftpUploader({ dir: path.join(__dirname, 'dist/'), host: 'host', url: 'url', port: 'port', username: 'username', password: 'password', previewPath: 'previewPath' }) const GitRevisionPlugin = require('git-revision-webpack-plugin') const gitRevisionPlugin = new GitRevisionPlugin({ versionCommand: 'describe --tags --always --dirty="-dev"', commithashCommand: 'log --max-count=1 --no-merges --pretty="%ai|%s"' }) function resolve (dir) { return path.join(__dirname, dir) } module.exports = { configureWebpack: config => { const plugins = [ gitRevisionPlugin, new webpack.DefinePlugin({ 'process.VERSION': JSON.stringify(gitRevisionPlugin.version()), 'process.COMMIT': JSON.stringify(gitRevisionPlugin.commithash()) }), sftp ] plugins.push( new CompressionPlugin({ test: /\.js$|\.html$|\.css/, threshold: 10240, deleteOriginalAssets: false }) ) return { name: name, resolve: { alias: { '@': resolve('src') } }, devtool: 'source-map', plugins } }, chainWebpack (config) { // 代码已省略 } } ``` ## resolve ### resolve.alias Vite官方文档：[resolve.alias](https://cn.vitejs.dev/config/shared-options.html#resolve-alias) ```js // vite.config.js import path from 'path' export default defineConfig({ resolve: { // 别名 alias: { "@": path.resolve(__dirname, "src"), // path.resolve(__dirname, './src') }, }, }) ``` ### resolve.extensions Vite官方文档：[resolve.extensions](https://cn.vitejs.dev/config/shared-options.html#resolve-extensions) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c71a2ad4e39412f9b7eacc95bc5e818~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1442&h=834&s=133117&e=png&b=0d0d0d) 怎么会引入文件出错了呢？原来啊， **在Vue CLI项目中，默认配置已经包含了对.vue文件的支持，并且在导入时自动省略文件扩展名。但在vite中，并不推荐这种方式，默认需要引入时添加上后缀.vue。** 我们可在文档中看到，如下截图： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f286775ea01e40498c2cda44b6b41c0d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=703&h=190&s=18433&e=png&b=fffefe) 虽然vite不建议，但是我们以前基本都是省略了后缀.vue的啊，况且我就是不想写后缀，怎么办呢？其实我们只需在extensions数组中加入`.vue`即可。 ```js export default defineConfig({ resolve: { // 导入时想要省略的扩展名列表,默认值['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'] // 官方文档中说：不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持 extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] }, }) ``` ## webpack.DefinePlugin 在vue.config.js中通过 webpack.DefinePlugin 定义的变量，通常可以在vite.config.js的 define中定义； ```js // vite.config.js export default defineConfig({ define: { 'process.VERSION': JSON.stringify(gitRevisionPlugin.version()), 'process.COMMIT': JSON.stringify(gitRevisionPlugin.commithash()) }, }) ``` ## 其他plugins方法其他vue.config.js中plugins引入的方法，可直接迁移到vite.config.js中，只需将引入方式 require 修改为 import即可。比如 sftpUploader ```js import sftpUploader from 'sftp-uploader' const sftp = new sftpUploader({ dir: path.join(__dirname, 'dist/'), host: 'host', url: 'url', port: 'port', username: 'username', password: 'password', previewPath: 'previewPath' }) export default defineConfig({ plugins: [ Vue(), // ViteRequireContext(), // 亲测有效，兼容require.context // transformScss(), // 亲测有效，但是不推荐，建议全局替换deep // vueJsx(), sftp ] }) ``` 在这里我要额外唠叨一下：在我这个项目中，引入"sftp-uploader"会出现问题（不是上面的代码或者使用方式有问题，而是其他原因），我们这个插件作用是用于将前端打包后的代码上传到服务器，这段代码我们在迁移到vite时，可以暂时先不处理，等到迁移到vite结束，项目正常运行起来后再将之引入，遇到的问题我们另开一篇来讲。感兴趣的可打开后方的链接： [迁移到vite后使用sftp-uploader遇到的坑](https://juejin.cn/post/7385904495383019556) ## 环境变量环境变量（.env.development、.env.production、.env.test）中所有以VUE_开头的变量都得改为VITE_开头，并在整个项目中全局替换这些修改的变量。 ```js // 在 webpack 项目中 ENV = 'development' VUE_APP_HOST = host_name VUE_APP_API_PREFIX= prefix_name VUE_APP_BASE_API = '${VUE_APP_HOST}/${VUE_APP_API_PREFIX}/one-travel-api/' VUE_APP_UPLOAD_API = '${VUE_APP_HOST}/upload-api-noauth/' VUE_APP_AUDIT_RECORD_API = '${VUE_APP_HOST}/${VUE_APP_API_PREFIX}/audit-api/' VUE_APP_H5_GENERATOR_API = '${VUE_APP_HOST}/demo/xinjiang/h5-generator/#/home' // 在 vite 项目中 # 不需要配置 ENV 或 NODE_ENV，判断环境统一使用更可靠的 import.meta.env.MODE VITE_APP_HOST = host_name VITE_APP_API_PREFIX= prefix_name VITE_APP_BASE_API = '${VITE_APP_HOST}/${VITE_APP_API_PREFIX}/one-travel-api/' VITE_APP_UPLOAD_API = '${VITE_APP_HOST}/upload-api-noauth/' VITE_APP_AUDIT_RECORD_API = '${VITE_APP_HOST}/${VITE_APP_API_PREFIX}/audit-api/' VITE_APP_H5_GENERATOR_API = '${VITE_APP_HOST}/demo/xinjiang/h5-generator/#/home' ``` 在vite中，不需要配置 ENV 或 NODE_ENV，判断环境统一使用更可靠的 import.meta.env.MODE 在整个项目中，全局替换 process.env.NODE_ENV、 process.env.ENV 为 import.meta.env.MODE ## process.env 在使用Vite替换webpack作为构建工具后，一般都会遇到环境变量访问process.env失败的问题。 Vite默认使用Vite特有的方式（import.meta.env）来导入环境变量，而不是通过process.env。 **解决方法**： 1、使用Vite的环境变量引导入方式。在Vite中，你可以直接在代码中导入环境变量，如下所示： import.meta.env.VITE_API_URL; **所以，针对本项目，我采用了这种Vite官方推荐的方式。** 在整个项目中，全局替换 process.env 为 import.meta.env 。 2、如果你希望继续使用 process.env访问环境变量，你可以通过Vite插件define来实现。首先，安装vite-plugin-env-compatible插件： ```js npm install vite-plugin-env-compatible --save-dev ``` 然后，在Vite配置文件中使用该插件： ```js // vite.config.js import EnvCompatiblePlugin from 'vite-plugin-env-compatible'; export default { plugins: [ EnvCompatiblePlugin({ // 可以指定需要转换的环境变量前缀，默认是'VITE_' prefix: 'VITE_' }) ] }; ``` 使用插件后，process.env应该能够正常访问环境变量。第二种方案，是我在网上见到的，不推荐，我也没有尝试过，具体是否可行待验证。 **请注意** Vite本身推荐使用导入方式来访问环境变量，因为这更符合现代JavaScript工具链的模式。使用插件方式只是为了兼容旧代码，在新项目中还是应该优先考虑使用Vite推荐的方法（即import.meta.env方式引入环境变量）。 ## 关于文件压缩在Vite中，你不需要使用compression-webpack-plugin来处理生产环境的文件压缩，因为Vite本身就内置了生产环境的压缩优化。在Vite项目中，你可以通过配置来启用压缩。Vite使用Rollup作为构建工具，并且默认情况下已经为你启用了多种压缩优化。以下是一些你可以在Vite配置文件中启用的压缩优化选项： 1. 树摇 (Tree-shaking): Vite 通过 Rollup 的静态分析能够自动移除未使用的代码。 1. 代码分割 (Code splitting): Vite 默认支持按需加载，只有当某个模块被实际请求时，才会加载该模块的代码。 1. 压缩 JS 和 CSS: Vite 使用 Rollup 插件来压缩你的 JavaScript 和 CSS 文件。 1. 图片优化: Vite 内置了对图片的压缩，通过插件如vite-plugin-imagemin可以进一步优化。如果你需要更多控制，可以自定义 Rollup 配置来添加更多的插件。如果你确实需要进一步控制压缩过程，可以查看Vite的官方文档来了解如何自定义配置。因此譬如下方原本vue.config.js中压缩js、html、css的代码，可以忽略不管了。 ```js plugins.push( new CompressionPlugin({ test: /\.js$|\.html$|\.css/, threshold: 10240, deleteOriginalAssets: false }) ) ``` 到了这里，基本配置似乎改得也差不多了啊【实际上还有后面即将提到的 require、reqiure.context 等不支持的问题，还有很多问题需要修改后才能将本地服务器跑起来】我们先在本地运行一下项目，瞧瞧如果你见到服务器能跑起来，那先恭喜你，已经小半只脚踏入了成功的门槛了。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a61b938513704cf8a1c01aa7a229fe37~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1427&h=822&s=131210&e=png&b=0d0d0d) 但是，如果你遇到了下面的错误， ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13b8e1cde5f5444ca1a6482800815d86~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1117&h=310&s=43256&e=png&b=0c0c0c) 别慌， SyntaxError: Unexpected token '??=' ，这个错误表明你的代码中出现了一个不被期望的标记 ??= ，我在项目中全局搜索，也没发现 '??='，又搜索?.，倒是在项目中搜到了不少，关键这里报错并没有指向我们自己写的代码，你喵的什么情况？我查了好些资料，别人也没有提到这种情况啊，怎么办？？？后来突然灵光一现，以前不是经常遇到因为版本问题引起过这样的问题么？是不是node版本导致的呢？查看node ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b57b650e62a34be8b9c958c1745352ea~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=488&h=93&s=7838&e=png&b=0d0d0d) node版本14.19.2，满足vite运行的条件啊！再看看，瞧到了这里 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ca8be0f29354a22ad1c6806db21b6ea~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1300&h=812&s=118885&e=png&b=fafafa) 怎么vite版本都5.3了，原来用的好像是4点几的版本吧，莫不是它在作怪的吧。立马从新卸载了vite@5.3.0，从新下载了vite@ 4.5.3 ```js npm uninstall vite npm install vite@4.5.3 --save-dev ``` 喵的，这个问题没有了，又出来个问题 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d707c8e604294ed098a0270aff26e8a2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1252&h=702&s=114242&e=png&b=0c0c0c) 百度搜索 The package "@esbuild/win32-x64" could not be found, and is needed by esbuild. 别人给了个解决方案：在运行dev之前先运行node node_modules/esbuild/install.js命令来解决esbuild安装问题；如下： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28c58735ddf749308cf423a90c89e610~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1541&h=741&s=93354&e=png&b=0c0c0c) 到此，总算见到服务器跑起来了。到这里，虽然本地服务器是运行起来了，可还能见到代码中的报错 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0e3c76d91704e12b5d80cfd550ab85d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1418&h=868&s=130978&e=png&b=0d0d0d) 好吧，别着急，我们接下来还得一点点解决 # 替换CommonJS vite 使用 ESM 作为模块化方案，因此不支持使用 require 方式来导入模块。否则在运行时会报 Uncaught ReferenceError: require is not defined 的错误（浏览器并不支持 CJS，自然没有 require 方法注入）。此外，也可能会遇到 ESM 和 CJS 的兼容问题。当然这并不是 vite 构建所导致的问题，但需要注意这一点。简单来说就是 ESM 有 default 这个概念，而 CJS 没有。任何导出的变量在 CJS 看来都是 module.exports 这个对象上的属性，ESM 的 default 导出也只是 cjs 上的 module.exports.default 属性而已。例如之前的代码： ```js /****** 基于 webpack 构建的项目 ******/ // settings.js module.exports = { title: '一码游新疆', areaCode: '650000000000', // 新疆区域code // 其余参数已省略 } // 使用时 import { title as systitle } from '@/settings.js' import { areaCode } from '@/settings.js' ``` 在导出和导入上都需要修改为 ESM，例如： ```js /****** 基于vite 构建的项目 ******/ export default { title: '一码游新疆', areaCode: '650000000000', // 新疆区域code // 其余参数已省略 } // 使用时 import settings from '@/settings.js' const {title } = settings ``` # 安装sass ```js npm install -D sass ``` 看上面的报错，是好多原来node-sass的代码的一些写法不支持了，我看了下文档和百度，也没发现支持node-sass的（或许有，是我没查到吧），故只能改为sass了。继续运行本地服务器 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87bc13e89b9446e0811722fe7ed19190~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1402&h=931&s=125986&e=png&b=0d0d0d) 喵的好几个报错，怎么办，先从简单的开始解决先瞧瞧这个 [sass] expected selector. 243 │ & /deep/ .el-form-item__content { src\styles\index.scss 243:5 root stylesheet 其实，这种报错，下方还有很多，看这意思，是 /deep/ 不支持了， **解决办法：搜索整个项目，全局替换 /deep/ 为 ::v-deep** 其实还有一种解决方案，就是定义一个vite plugin 方法，此方法函数用于找到 /deep/ 并替换为 ::v-deep，然后在 vite.config.js的plugins 中引入此方法即可。 ```js // vite.config.js function transformScss() { return { name: 'vite-plugin-transform-scss', enforce: 'pre', transform(src, id) { if ( /\.(js|ts|tsx|vue|scss)(\?)*/.test(id) && !id.includes('node_modules') ) { return { code: src.replace(/\/deep\//gi, '::v-deep'), }; } }, }; } export default defineConfig({ plugins: [ Vue(), transformScss(), ] }) ``` 再看另一个问题 # ~ 符号不支持 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3074099c858d4aa292645085fb0280be~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1396&h=559&s=93501&e=png&b=0d0d0d) 还有出现这样的错误提示的 [sass] Can't find stylesheet to import. 25 │ @import "~element-ui/packages/theme-chalk/src/index"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ src\styles\element-variables.scss 25:9 root stylesheet 按照错误提示，是没有找到 ~element-ui/packages/theme-chalk/src/index 这个文件啊，可我再项目中确认了，这个文件确实存在的啊，那应该是前面这个符号~ 无法识别了，我们可以在别名alias中处理此符号， ```js export default defineConfig({ resolve: { alias: [ { find: /^~/, replacement: '' } ], }, }) ``` 但是不知道什么原因，我第一次尝试这样设置的时候，是成功了的，可是后来这种解决方式失效了。因此到最后，我采用了直接在整个项目中删除此~符号。其他跟 ~ 相关的代码修改: ```html

``` ```css /****** 基于 webpack 构建的项目 ******/ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; /****** 基于 vite 构建的项目 ******/ $--font-path: 'node_modules/element-ui/lib/theme-chalk/fonts'; @import "node_modules/element-ui/packages/theme-chalk/src/index"; ``` 继续本地运行，报错 Deprecation Warning:Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21a1a59f40a84116bb7ba61db9c8b4a7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1081&h=903&s=123154&e=png&b=0d0d0d) 这样的报错，在项目中有很多，且大多数都指向引入的element-ui，使我无限懵逼，后来我才想到，应该是在新安装的Sass版本 ```js "sass": "^1.77.5", ``` 不支持此语法了，为了不改动原有的代码和修改element-ui 版本，我将sass版本降级到了 ```js "sass": "^1.32.12", ``` 接下来还得继续，报错 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ece90d472c84c439e8dac6aab91dec1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1519&h=949&s=179161&e=png&b=0c0c0c) 根据错误提示，目前加载store的时候有问题，查看里面的代码，有几个地方涉及require引入文件，问题来了。 require 和 require.context 只在基于webpack构建的项目中有效，那这里该如何修改呢？ # require.context不支持 webpack使用 require.context() 来动态查找文件内容，但vite不支持。有两种修改方式：第一种是修改为vite的导入方式，另一种则是使用插件兼容原来的语法。两种修改方式思想不同，结果都一样，各有千秋。个人还是建议使用第一种修改方式。 ## 第一种 **导入多个模块** Vite官方文档：[Glob 导入](https://cn.vitejs.dev/guide/features#glob-import) 将reqiure.context()修改为import.meta.globEager()或者 import.meta.glob() ```js // 在webpack中 const context = require.context('./', false, /\.vue$/) // 在vite中 const context = import.meta.glob("./**/*.vue") ``` 在本项目中，require.context主要在批量注册全局组件和自动引入Vuex中分割的Module 两个功能下有涉及，如下图 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a45a08d9e734fdea98ecdde94104c21~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1797&h=956&s=194222&e=png&b=faf9f9) 相应的如何修改并让原本的功能正常运行，我已经在另外两篇文章中做了详细阐述： [如何在本地Vue项目中批量注册全局组件](https://juejin.cn/post/7383968655078703115) [如何自动引入Vuex中分割的Module](https://juejin.cn/post/7383963148347899916) 在这里我就不再做过多阐述了。 ## 第二种使用插件兼容：@originjs/vite-plugin-require-context 处理办法： https://juejin.cn/post/7282951856514400297 安装 @originjs/vite-plugin-require-context 支持 require.context https://www.npmjs.com/package/@originjs/vite-plugin-require-context ```js import ViteRequireContext from '@originjs/vite-plugin-require-context' export default defineConfig({ plugins: [ ViteRequireContext(), // 兼容require.context ] }) ``` 此种兼容require.context的方式我已经在项目中测试通过，尚未发现问题。 # require不支持作为webpack中常用的一个导入函数，require在导入图片、js、vue等各种文件中发挥着重要的作用。然而在vite中，引入图片不能再用require了,使用 new URL(url,import.meta.url).href 才能获取到引入图片的链接地址。 ```js // 在webpack中 logo: require('./images/logo.png') pathStr = require('@/assets/audit_images/audit_wait.png') // 在vite中 logo: new URL('./images/logo.png', import.meta.url).href pathStr = new URL('@/assets/audit_images/audit_wait.png', import.meta.url).href ``` ```html ``` 由于在项目中使用require导入图片的地方比较多，我们也可以将导入图片抽象为一个公共方法使用（推荐） ```js import Vue from 'vue' export function requireImg (url) { return new URL(url,import.meta.url).href } Vue.prototype.$requireImg = requireImg ``` 项目中其他导入vue文件的代码也需要修改，如下： ```js /****** 在webpack中 ******/ const menuContainer = [ resolve => require(['@/layout'], resolve), resolve => require(['@/layout/twoLevelLayout.vue'], resolve), resolve => require(['@/layout/twoLevelLayout.vue'], resolve) ] /****** 在vite中 ******/ const menuContainer = [ () => import('@/layout'), () => import('@/layout/twoLevelLayout.vue'), () => import('@/layout/twoLevelLayout.vue') ] ``` ```js /****** 在webpack中 ******/ const secondLevelMenu = parentPath + item.path try { item.component = resolve => require([`@/views${secondLevelMenu}`], resolve) } catch (e) { console.error('找不到该界面：' + secondLevelMenu) } /****** 在vite中 ******/ const viewsPath = import.meta.glob('@/views/**/*.vue') // vite动态引入文件 const secondLevelMenu = parentPath + item.path try { item.component = viewsPath[`/src/views${secondLevelMenu}.vue`] } catch (e) { console.error('找不到该界面：' + secondLevelMenu) } ``` 改完调试,还能看到下面的问题 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb189b9731064539821a6acd3b7d9d23~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1511&h=735&s=88657&e=png&b=0c0c0c) 上面提示在这几个地方引入sass变量文件的时候加入'?inline' 为什么会这样啊？我们打开它提示报警的文件，发现在这两个sass文件后面都有一个共同点，有需要导出的变量，如element-variables.scss 中 ```css $--color-primary: #1890ff; :export { theme: $--color-primary; } ``` **所以我们不难看出，在vite中，有导出变量的sass文件，在其它文件引入时，需要在后方加上"?inline"** 这应该也是vite和webpack两者之间的差异吧按照提示，在这两段引入的scss变量文件后面加入了'?inline' ```js /****** 在webpack中 ******/ import variables from '@/styles/element-variables.scss' /****** 在vite中 ******/ import variables from '@/styles/element-variables.scss?inline' ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b6a7ce1c36874f158d61c6751d37f38e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=497&h=174&s=15685&e=png&b=f1eeee) 改好后，我们继续看 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecc38e3836bc4a42b707da83d883e633~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1669&h=1010&s=173257&e=png&b=0e0e0e) 而在浏览器中报错这样的： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a71f5136112d4d3e95e60ed7798089af~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1310&h=492&s=68811&e=png&b=2d2d2d) 定位到出错文件的代码： ```html ``` 看这报错，应该是不支持 jsx了，最先安装了[@vitejs/plugin-vue-jsx](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx) ，尝试运行，发现还是报错，再看文档，发现是针对Vue3的 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9accd62cd0ec4e3198cf89bd56fde57e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1574&h=710&s=91288&e=png&b=fdfdfd) ，而针对Vue2的是 [@vitejs/plugin-vue2-jsx](https://www.npmjs.com/package/@vitejs/plugin-vue2-jsx)，所以又安装了[@vitejs/plugin-vue2-jsx](https://www.npmjs.com/package/@vitejs/plugin-vue2-jsx)，结果发现还是继续报错。百度了好些，都没找到能真正行之有效的解决方案。后来想着算了，反正项目中这样的写法也不多，直接修改这个组件得了。 ```html ``` 到此，我们项目已经能正常跑起来了，本地服务器后台也没有了报错，我也正常运行项目，登录成功跳转到首页，随便点了些页面，发现都能正常跑起来。可是，别以为这样就结束了，如果我们要将改写好的代码用到实际中，最后上到生产的话，我们还是得每个页面每个功能，都得重新回归测试的。譬如我修改的这个项目，就在我以为没啥大问题的时候，无意中点到了几个页面，就发现页面一片空白，诡异的是浏览器里面没有任何报错，本地服务器后台同样如此。可偏偏页面就是空白了，我又重新点击了好些个页面，发现一些页面同样如此，这样就把我搞蒙圈了，没任何报错，就是空白，什么情况这是？我又仔细观察了空白页面跟正常运行页面之间的差别，终于被我发现，原来，空白的页面跟正常页面文件结构不同，比如项目中景区管理文件夹 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e0b8e45d83b741cabdc30892f1d8581a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=392&h=318&s=14791&e=png&b=f3f3f3) 我们配置的路由路径，前两个到文件夹名scenic和venue这里就结束了，index.vue 作为默认文件名，在webpack中，它是可以自己查询到的，可是到了vite中，它就没去自动查找获取了，结果在vite中，它去找的是scenic.vue、venue.vue，结果很显然，项目中并不存在这两个文件，而在我们根据后台router数据渲染页面的代码中， ```js // 菜单目录容器，暂时极限支持四级菜单 const menuContainer = [ () => import('@/layout'), () => import('@/layout/twoLevelLayout.vue'), () => import('@/layout/twoLevelLayout.vue') ] export function filterAsyncRoutes (routes) { let viewsPath = [] viewsPath = import.meta.glob('@/views/**/*.vue') // vite动态引入文件 function replaceComponent (routes, parentPath = '', level = 0) { routes.map(item => { if (item.path && !item.path.startsWith('/')) { item.path = '/' + item.path // 补全根路径 } if (item.type === '0' && !item.children) { return // 去掉空目录 } // 目录 if (item.type === '0') { item.component = menuContainer[level] // 目录容器 } // 菜单 if (item.type === '1') { const secondLevelMenu = parentPath + item.path try { console.log('---viewsPath---',viewsPath) item.component = viewsPath[`/src/views${secondLevelMenu}.vue`] } catch (e) { console.error('找不到该界面：' + secondLevelMenu) } } if (item.children) { const children = replaceComponent( item.children, parentPath + item.path, 1 + level ) // 访问根路径时定向到第一个界面 item.children = [ { path: '/', redirect: parentPath + item.path + `/${children[0].path}` }, ...children ] } else { item.children = [] } if (level != 0) { // 除了根目录，vue-router 其他子目录不需要 / item.path = item.path.substring(1) } return item }) return routes } ``` 如下图箭头指向 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/91a03a268f03452db9a5358ca9662913~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1701&h=857&s=194809&e=png&b=fbf3f2) 为了能清楚的说明上面代码发生了什么，我以场馆管理页面为例，在生成路由的地方添加console，打印路由地址和对应需要引入的vue文件，我们就能清晰的弄清楚问题所在了。 ### 在webpack中路由地址为：/applets/scenic/venue 对应的vue文件路径：@/views/applets/scenic/venue require 导入这个vue文件，它可以自动找到venue文件夹下的index.vue,相当于使用require,它先找了@/views/applets/scenic/venue.vue,如果找不到，它还可以自动去找@/views/applets/scenic/venue/index.vue 如下图 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba596406656548ffb590e4a80a27be5d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1345&h=727&s=113548&e=png&b=fcfcfc) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/696ea72badfb4295b5e229d2c1a2f9ca~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1394&h=947&s=144806&e=png&b=fefdfd) ### 在vite中路由地址为：/applets/scenic/venue 对应的vue文件路径：/src/views/applets/scenic/venue.vue，可以看出，在vite中，只能去找【/src/views/applets/scenic/venue.vue】，由于这个文件不存在，故出现了空白。如下图 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c0d203034104f849a0d6d0b578712dc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1371&h=903&s=162452&e=png&b=fefdfd) 或许有人会说了，你的vue模板路径，在webpack中，你并没有在末尾加上".vue"后缀，却在vite中加上了，你把在vite中加上的".vue"去掉不就可以了么？可事实上是，如果我在vite中去除了".vue"，那么整个vue模板，再使用import导入后，连原本可行的页面都一起空白了，根本就行不通。至于 ```js item.component = viewsPath[`/src/views${secondLevelMenu}.vue`] ``` 这里为啥写成/src，而不是@，是因为上方的 viewsPath变量，它使用 import.meta.glob ```js viewsPath = import.meta.glob('@/views/**/*.vue') ``` 一次性将views下所有的vue文件都导入生成了一个对象我把它打印出来，如下图 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2826537b1cf845d98c415abd7eb5f4cf~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=820&h=749&s=149254&e=png&b=fffefe) 这个对象里，vue文件地址为key，import导入的文件为vue，key值都是 /src开头所以知道在vite中，为啥我们使用的是/src开头了吧。既然我们已经知道了，在vite中，是对应路由下，未能正常获取到vue文件路径，那么，我们也该知道怎么修改了吧！ #### 方法一：调整出现空白的页面路径，将对应文件夹下的index.vue，按照文件夹名改名并挪到上一级即可（挪移的过程中可能会涉及到修改对应引入的文件路径）显然这种方式并不友好，对于要迁移的老项目，这种方式的显然不少，何况挪移修改的同时，由于其相对路径的变更，还得同时修改其它引入的文件相对路径。 #### 方法二：修改获取vue文件的代码 ```js // 优化前 item.component = viewsPath[`/src/views${secondLevelMenu}.vue`] // 优化后 const viewUrl = `/src/views${secondLevelMenu}` item.component = viewsPath[`${viewUrl}.vue`]??viewsPath[`${viewUrl}/index.vue`] ``` 到目前为止，我要迁移的整个项目在启动本地服务器后各个页面都正常跑起来了，各个页面点点点也没见到报错了，是不是有点小激动（当然可能还存在其他问题，需要整个项目整体重新测试一番才行哦）。 # 打包时的尴尬本以为项目都能正常跑起来了，打包应该也没问题呗，实际上还又遇到问题了。运行 npm run build ，打包过程出现了如下几个报错： ## 问题一： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/764b4b3f69014f4598e4cb2e534fc0ac~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1899&h=889&s=160022&e=png&b=0c0c0c) 根据报错提示，定位到报错的vue文件，发现模板 ```html ``` template 上多了个属性lang，其实vue文件模板默认就是以html来解析的，这种写法不推荐使用。不晓得是原来哪个同事写的，在webpack中并不会出错，结果现在迁到vite就报错了，无须多做考虑，本就是默认值，直接删除`lang="html"`即可， ## 问题二： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68d73151d8cf4826a7c803c0c139756d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1535&h=937&s=163095&e=png&b=0d0d0d) 定位到文件，发现原来是图片img由require 改为 new URL , 里面 import.meta 无法识别导致报错。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/60ddde8ac9a64695843c8c5a7c57adc2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1761&h=407&s=68817&e=png&b=fefdfd) 建议将 require图片的 new URL 封装为公共函数，需要require图片的时候直接调用即可。 ```js function $requireImg(url){ return new URL(url, import.meta.url).href } ``` # 打包时可能需要的其他设置 ## 删除注释、debugger、console 在webpack中，我们一般使用插件 terser-webpack-plugin、uglifyjs-webpack-plugin 来实现； 1、使用 terser-webpack-plugin ``` js npm install terser-webpack-plugin --save-dev yarn add -D terser-webpack-plugin pnpm add -D terser-webpack-plugin ``` ```js const TerserPlugin = require("terser-webpack-plugin"); module.exports = { configureWebpack: { optimization: { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { format: { comments: false } }, extractComments: false ， compress: { } }) ] } }, } ``` 2、使用 uglifyjs-webpack-plugin ``` npm install uglifyjs-webpack-plugin -D ``` ```js const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { configureWebpack: { optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { // 删除注释 output: { comments: false }, // 删除console debugger 删除警告 compress: { drop_console: true, //console drop_debugger: false, pure_funcs: ['console.log'] //移除console } } }) ] } } } ``` 在vite中，我们可以设置 build.minify为'terser'（需要下载terser），然后在 build.terserOptions中设置terser的参数即可 Vite官方文档：[build-terseroptions](https://cn.vitejs.dev/config/build-options#build-terseroptions) ```js npm add -D terser ``` ```js export default defineConfig({ minify:'terser', terserOptions: { compress: { drop_console: true, //打包时删除console pure_funcs: ['console.log'], drop_debugger: true, //打包时删除debugger }, output: { comments: true, // 打包时删除注释 }, }, }) ``` ## 拆分打包 Vite官方文档：[build-rollupoptions](https://cn.vitejs.dev/config/build-options#build-rollupoptions) 在webpack中，拆分打包（亦或者叫代码分割或者代码拆分）我们一般在optimization.splitChunks中实现 ```js module.exports = { chainWebpack (config) { config.optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, elementUI: { name: 'chunk-elementUI', // split elementUI into a single package priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm }, commons: { name: 'chunk-commons', test: resolve('src/components'), // can customize your rules minChunks: 3, // minimum common number priority: 5, reuseExistingChunk: true } } }) config.optimization.runtimeChunk('single') } } ``` 改为vite后，通过打包出来的文件我们可以看到 ![1720668085320.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/77e5a7176500474c94023f2f86878ca2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgd2FuZ3Bx:q75.awebp?rk3s=f64ab15b&x-expires=1776985790&x-signature=nFCrveeIuYNZkVfV2%2BKn7fewMk0%3D) 运行时， ![1720668460862.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/dbd7f0e1f16c41e28a67f813261da16d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgd2FuZ3Bx:q75.awebp?rk3s=f64ab15b&x-expires=1776985790&x-signature=a3ijDq8tPIxgzNDHJ3ibMOcnn7c%3D) 个人觉得，已经很不错了，如果你还是想在vite中自己定义规则做拆分，你可以通过 rollupOptions.manualChunks实现 ```js export default defineConfig({ build: { rollupOptions: { manualChunks(id) { if (id.includes('node_modules') ) { if(id.includes('node_modules/element-ui')){ return 'chunk-elementUI'; }else{ return 'chunk-libs'; } } if(id.includes('src/components')){ return 'chunk-components'; } } } } }) ``` # 最后删除跟webpack相关的无用文件删除build文件夹及其里面的文件index.js；删除public文件夹(public/index.html需要迁移到根目录，前面已提及) 删除vue.config.js文件 ...... # 总结 vue2项目从`webpack` 迁移到 `vite`, 需要完成以下几步: - 创建vite.config.js - 安装Vite依赖(vite@4.5.3、plugin-vue2、sass...),升级vue@2.7.14 - 基本配置(开发服务器、构建选项、plugins、resolve、define、环境变量、index.html、package.json等) - 其他webpack变量修改（import.meta.env、jsx问题、require、require.context） - 文件报错问题（1、替换CommonJS；2、sass相关问题，比如不支持node-sass、/deep/、~,?inline，sass变量语法报错...；3、导入多个文件，使用import.meta.glob；4、path-browserify） - 打包vite build - 删除无用的文件和依赖包附： vite.config.js ```js /* * @Descripttion: * @Author: wang pingqi * @Date: 2024-06-13 11:41:00 * @LastEditors: wang pingqi * @LastEditTime: 2024-06-26 16:58:12 */ import { defineConfig } from 'vite' import Vue from '@vitejs/plugin-vue2' import path from 'path' // import ViteRequireContext from '@originjs/vite-plugin-require-context' // import vueJsx from '@vitejs/plugin-vue2-jsx' // 打印git日志 import GitRevisionPlugin from 'git-revision-webpack-plugin' const gitRevisionPlugin = new GitRevisionPlugin({ versionCommand: 'describe --tags --always --dirty="-dev"', commithashCommand: 'log --max-count=1 --no-merges --pretty="%ai|%s"' }) // function transformScss() { // return { // name: 'vite-plugin-transform-scss', // enforce: 'pre', // transform(src, id) { // if ( // /\.(js|ts|tsx|vue|scss)(\?)*/.test(id) && // !id.includes('node_modules') // ) { // return { // code: src.replace(/\/deep\//gi, '::v-deep'), // }; // } // }, // }; // } export default defineConfig({ // 开发或生产环境服务的公共基础路径,用于指定项目中静态资源的基本路径 base: './', // 构建选项 build: { // 指定输出路径（相对于项目根目录). outDir: "dist", // 指定生成静态资源的存放路径（相对于 build.outDir）。在库模式下不能使用。 assetsDir: 'static', // 构建后是否生成 source map 文件 sourcemap: false, minify:'terser', terserOptions: { compress: { drop_console: true, //打包时删除console pure_funcs: ['console.log'], drop_debugger: true, //打包时删除debugger }, output: { comments: true, // 打包时删除注释 }, }, rollupOptions: { manualChunks(id) { if (id.includes('node_modules') ) { if(id.includes('node_modules/element-ui')){ return 'chunk-elementUI'; }else{ return 'chunk-libs'; } } if(id.includes('src/components')){ return 'chunk-components'; } } } }, server: { open: true }, resolve: { // // 别名 // alias: { // "@": path.resolve(__dirname, "src"), // path.resolve(__dirname, './src') // // "components": path.resolve(__dirname, "src/components"), // // "styles": path.resolve(__dirname, "src/styles"), // // "views": path.resolve(__dirname, "src/views"), // // "utils": path.resolve(__dirname, "src/utils") // }, alias: [ { find: /^~/, replacement: '' }, { find: '@', replacement: path.resolve(__dirname, 'src') } ], // 导入时想要省略的扩展名列表,默认值['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'] // 官方文档中说：不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持 extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] }, plugins: [ Vue(), // ViteRequireContext(), // 亲测有效，兼容require.context // transformScss(), // 亲测有效，但是不推荐，建议全局替换deep // vueJsx() ], define: { 'process.VERSION': JSON.stringify(gitRevisionPlugin.version()), 'process.COMMIT': JSON.stringify(gitRevisionPlugin.commithash()) } }) ```