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
下面是相关链接
vue2 + vite
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 将应用中的模块分为依赖和源码两类，分别进行服务器启动时间的优化。
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返回回来
源码模块，是用户自己开发的代码，会经常变动。（协商缓存）
2、 生产环境的构建为什么不直接使用 esbuild，而是使用 rollup 呢？
因为 esbuild 在代码分隔、css 处理等方面的功能仍在开发中，rollup 在应用打包方面更加的成熟且灵活
3、 依赖预构建的目的
开发阶段，Vite 的 Dev Server 将所有代码视为原生 ES 模块。因此，Vite 必须将 CommonJS 或 UMD 发布的依赖项转为 ESM
Vite 将有很多内部模块的依赖视为单个模块，浏览器只需要发起一个请求。
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就行
14、Component is missing template or render function
出现这问题，一般就是两种可能
可能1：文件名后缀
ts = js > tsx = vue， 基本上来说就是逻辑文件优先于模板文件，在你省略后缀时将以这种优先级导入文件
可能2：文件内为空
比如你引入了vue文件，但是文件内没有代码，就会报这种错误，最简单解决方式就是加上下面几行，使文件不为空
<template>
<div></div>
<template>
---持续更新---
