【Vite】vite及webpack相关常见问题集合

置顶林大大哟

已于 2024-02-19 12:14:48 修改

阅读量3.4k

点赞数 2

分类专栏： vue学习文章标签： vue.js javascript 前端

于 2022-08-16 18:01:15 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39404437/article/details/126371508

版权

vue学习专栏收录该内容

29 篇文章

订阅专栏

1、sass :export

:export 是用于sass文件和js文件关联的，用此可以将sass中样式类似于es6语法中export导出，并在其他样式或者js文件中直接使用，但是目前只适用于 webpack4 或者 node-sass v4.9及以上

demo：

@/styles/common.scss

$primary:#ffffff;
$sideWidth: 100px;

:export {
  primary: $primary;
  sideWidth: $sideWidth;
}

应用组件

<script>
    import common from  '@/styles/common.scss'
    export default{
        mounted() {
           console.log(common.sideWidth)
        }
    }
</script>
<style>
import '@/styles/common.scss';
.main{
   color: primary;
}
</style>

2、vue.config.js loaderOptions 的 prependData 和 additionalData

主要是用来配置全局变量的，用法大致都一样，只是对应sass-loader版本不同， v8以下用的是data，v8用的是prependData， v10及以上用的是additionalData，目前一般安装最新的都是additionalData，另外在sass编译条件下@import不用加分号，scss编译条件下需要分号，注：scss语法也会在sass-loader下编译

demo：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/assets/styles/common.sass"` // sass不需要加分号
      },
      scss: {
        additionalData: `@import "~@/assets/styles/common.scss";` // scss必须要加分号
      }
    }
  }
};

3、node-sass 安装失败

这种错误相信使用大家在改以前旧项目时经常遇到，很恼火，一般导致这问题的原因如下

1、没有配置npm镜像源，从国外访问太慢导致失败

解决方法：

npm config set registry https://registry.npm.taobao.org
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass

2、 node 版本和 node-sass 不兼容

以前很多老项目开始的时候，可能node版本才v10，一般的都v14，现在node 16都出来了，要是你们项目里package.json没有锁定依赖具体版本，那么就会全下载最新的，那肯定兼容报错

以下在我在node-sass github收集的，想去看的链接如下

https://github.com/sass/node-sass/releases

Node版本	node-sass版本
12, 14, 16, 17	7.0.1
12, 14, 16, 17	7.0.0
12, 14, 15, 16	6.0.1
12, 14, 15, 16	6.0.0
10, 12, 14, 15	5.0.0
0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14	4.14.1
0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14	4.14.0
0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13	4.13.1
...	...

3、提示python啥的，然后安装失败

遇到这种问题，先别急，大概率就是node 版本和 node-sass 不兼容，这时候先 uninstall node-sass，再将你的node_modules 移除掉，一般来说有错误日式也要一并删除掉，然后先对照我第二点，找到你对应的node-sass版本下载

总结一下：其实node-sass是导致vue项目安装出错最多的依赖，官方都不推荐了额，你在新建项目时，能选择dart-sass就选择dart-sass吧

4、sass-loader 安装报错

这依赖又跟上面node-sass版本紧密相关了，看吧 node-sass问题太多了，不过用了也没办法，总得解决一下，下面是部分 node-sass 与 sass-loader 关联版本

node-sass	sass-loader
4.3.0	4.1.1
4.7.2	7.0.3 7.3.1
4.14.1	7.3.1
5.0.0	7.2.0
6.0.1	10.0.1

---持续更新---

5、command failed: pnpm install --reporter silent --shamefully-hoist

出现此原因是在你vue create xxx 创建项目时时，默认使用pnpm，然后需要版本为6

npm i pnpm@6 -g

然后再

vue create xxx

6、目前打包器依赖及打包格式

sass(已升级到1.57.1)vite直接安装sass，webpack安装sass和dart-sass/node-sass;
vite(内置rollup，已升级到4);

rollup(升级到3)（官网：https://rollupjs.org/migration/）;

/es(esmodule rollup使用)现代浏览器常用
/umd(通用模块化，包含amd，cjs 和 iife)现代浏览器常用
/cjs(CommonJS，同步，主要用于服务器端开发)(webpack使用)
/amd(RequireJS，异步，浏览器端开发)
/cmd(SeaJS，异步，浏览器端开发)

7、技术热点

vite4（官方文档还未出来） => rollup3
vite3 （需要 Node版本 14.18+, 16+.，yarn和npm的确不行，必须要指定node版本之上，但是pnpm可以不需要指定node版本，直接安装到最新的vite）=> rollup2

vite2（需要 Node版本 12.2.0 +）=> rollup2
Webpack 5 => Node.js v10.13.0+

8、vue2 + vite3解决方案

pnpm add vite@3.2.3 -D
pnpm add vite-plugin-vue2 -D
pnpm add vue-template-compiler@2.6.11 -D

想用jsx语法的话，需要安装依赖 @vue/babel-preset-jsx 此依赖用于vue2 + jsx

9、vue-loader各版本

v15.10.1
const VueLoaderPlugin = require('vue-loader/lib/plugin')
v16及以上
const VueLoaderPlugin = require('vue-loader/dist/plugin').default

10、webpack中sass-loader css-loader style-loader依赖作用

通过 sass-loader 把 SCSS 源码转换为 CSS 代码，再把 CSS 代码交给 css-loader 去处理。
css-loader 会找出 CSS 代码中的 @import 和 url() 这样的导入语句，告诉 Webpack 依赖这些资源。同时还支持 CSS Modules、压缩 CSS 等功能。处理完后再把结果交给 style-loader 去处理。
style-loader 会把 CSS 代码转换成字符串后，注入到 JavaScript 代码中去，通过 JavaScript 去给 DOM 增加样式。

11、vite 相关知识

Vite 将应用中的模块分为依赖和源码两类，分别进行服务器启动时间的优化。

11.1、依赖模块，开发过程中基本不会变化：（强缓存）

Vite 对依赖采用了 esbuild 预构建的方式，全存在强缓存中，除非删除.vite文件或者执行vite dev --force
才会刷新依赖缓存，其次esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍；
解析过程：
import Vue from 'vue' 会转换成 import Vue from '/@modules/vue'
解析/@modules 会到包里面，将dist/vue.runtime.esm-bundler.js返回回来
源码模块，是用户自己开发的代码，会经常变动。（协商缓存）

11.2、生产环境的构建为什么不直接使用 esbuild，而是使用 rollup 呢？

因为 esbuild 在代码分隔、css 处理等方面的功能仍在开发中，rollup 在应用打包方面更加的成熟且灵活

11.3、依赖预构建的目的

开发阶段，Vite 的 Dev Server 将所有代码视为原生 ES 模块。因此，Vite 必须将 CommonJS 或 UMD 发布的依赖项转为 ESM
Vite 将有很多内部模块的依赖视为单个模块，浏览器只需要发起一个请求。

11.4、 webpack和vite对比

webpack：
需要将源码打包成Bundle给浏览器，有文件更新会重新打包，项目越大越慢，本身不支持
ts/jsx等
支持的模块规范：ES Modules，CommonJS 和 AMD Modules；
开发环境：通过 webpack-dev-server 托管打包好的模块；
生产环境：webpack
vite：
直接将源码转换成ES Modules文件给浏览器，有文件更新只会编译有更新的文件，
不管项目大小都很快，并且本身就只吃ts/jsx等
支持的模块规范：ES Modules；
开发环境：原生 ES Modules；
生产环境：Rollup

12、vue3 + element-plus cdn引入时，报‘createElementVNode‘ (imported as ‘_createElementVNode‘) was not found 错误

这种问题多数是在main文件中，先挂载了dom，再执行use(ElementPlus)，正确顺序如下：

const app = createApp(App)
app.use(ElementPlus).mount('#app')

当然index.html中cdn的包应该如下：

    <!-- 引入样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- 引入组件库 -->
    <script src="//unpkg.com/element-plus"></script>

13、vue3 + vite 运行报错 Cannot read properties of null (reading 'isCE')

这种情况多数源于vue版本不对，导致这个问题的原因就是我们在vite打包里，一般使用rollup-plugin-external-globals 或者其他插件将vue不打入依赖代码库中，想使用cdn外链形式引入，但是你的package.json中 dependencies 中有vue依赖，导致外链cdn和依赖中都有vue，所以解决方式就是将依赖从生产依赖dependencies去除掉，可以加在开发依赖devDependencies中没问题。

那有童鞋想说：如何根据开发环境和生产环境来配置呢？其实生产环境我们就需要减少依赖的使用，因为打包后会增加包的体积，所以生产环境基本使用cdn外链形式就可以，开发环境就将依赖写入devDependencies就行