本文目录一览：

• 1、vue3.0和2.0的区别是什么？
• 2、vue2.0和3.0区别
• 3、基于Vue3+TS+ElementPlus+Qiankun构建微应用项目
• 4、通俗易懂讲解vue.config.js的配置参数

vue3.0和2.0的区别是什么？

vue-cli2.0与3.0在目录结构方面，有明显的不同。

vue-cli3.0移除了配置文件目录，config 和 build 文件夹。

同时移除了 static 静态文件夹，新增了 public 文件夹，打开层级目录还会发现， index.html 移动到 public 中。

配置项，3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同。

没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变。

Vue3.0不论是原生的html标签还是vue组件，他们都会通过h函数来判断，如果是原生html标签，在运行时直接通过Virtual Dom来直接渲染，同样如果是组件会直接生成组件代码。

数据监听，Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的，而vue3.0的版本，是基于Proxy进行监听的，其实基于proxy监听就是所谓的lazy by default。

版权声明：本文为CSDN博主「水墨-青花」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

vue2.0和3.0区别

项目目录不同

1、vue-cli3.o移除了config.文件夹。

2、多了vue.config.js文件。

3、新增了一个views文件夹。

4、删除了static新增了public文件夹。

5、index.html移动到public了。

配置项不同

1、vue-cli2.0的域名配置，分为开发环境和生产环境。

2、所以配置域名时，需要在config中的dev.env.js和。

3、prod.env.js中分别配置3.0 config.文件已经被移除。

4、但是多了。env.production和env.development文件。

5、除了文件位置，实际配置起来和2.没什么不同。

创建项目的方式不一样

1、vue-cli2.0，vue init webpack项目名。

2、vue-cli3.0 vue create项目名。

基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

Hello 大家好，这里是Anyin。

最近打算把一个小型项目（小程序点餐系统）重构为微服务+微应用模式，前端的技术栈打算使用Vue3 + TS + ElementPlus + Qiankun 。这里记录下我在构建基础微应用的过程。

重构后的项目相关地址：

•后端： Anyin Cloud [1]

•前端基座： Anyin Cloud Parent[2]

•前端微应用： Anyin Cloud Base[3]

好了，接下来，我们来看看如何基于 Vue3+TS+ElementPlus+Qiankun 构建我们的微应用项目。

另外说下，这里为什么不用 Vite 进行构建，原因是 Vite 目前结合 Qiankun 构建为应用还有点问题（采坑了），所以这里就放弃了。

首先，我们使用 vue-cli 创建一个parent项目:

接着，手动选择我们要添加的组件：

我们选择以下组件进行应用的构建，使用空格键进行多选，然后回车即可：

选择vue3.x版本

相关代码风格、路由模式都是使用默认，css编译我们使用less：

相关编码规范我们使用ESLint + Airbnb Config ：

最后，完整的选项如下：

当vue-cli帮我们创建好项目，我们进入项目查看下项目目录，如下：

首先，Qiankun的主应用是需要安装依赖的，微应用无需安装依赖，修改配置即可。这里我们先在主应用安装依赖

接着，进行相关微应用配置。我们新增一个 app.ts ，用于记录所有的微应用的入口：

然后，注册微应用，并导出start方法

导出 start 方法之后，需要在入口处执行该方法

对于整个界面，我们希望整体的布局是这个样子的：

所以，我们在安装 ElementPlus 之后，需要做这样子的布局。

首先，安装 ElementPlus

接着，在 main.ts 引入 ElementPlus 组件，如下:

然后，创建一个布局组件 Layout.vue ，如下：

最后，在App.vue注册该组件

运行起来呈现的效果如下：

微应用的初始化项目同主应用，这里就不详细说明。

微应用无需依赖 Qiankun ，这里我们做一些配置即可。

在 src 目录下新增一个 public-path.js 文件，内容如下：

在 main.ts 引入该文件

新增一个路由配置文件，这里我们创建对应的路由信息，并且兼容独立运行，内容如下：

接着，修改 main.ts 关于实例化的代码，如下：

这里主要是定义个渲染的方法，然后暴露Vue实例，因为等下在微应用的生命周期的钩子会使用到。

对于微应用还需要暴露生命周期的钩子方法，这样子主应用才能够识别，在 main.ts 添加如下方法：

使用 vue 创建项目是没有 vue.config.js 文件的，这里我们手动创建一个，并且配置相关详细，代码如下：

•这里我们导入了 package.json 的 name 字段，因为这里需要和主应用配置的 app.ts 文件的 name 字段一致 • headers 添加跨域配置，因为主应用是通过 fetch 方法来获取微应用的资源的，而微应用是启动在另外一个端口，所以需要添加跨域配置 • output 配置了微应用的打包格式，主应用才能正确识别微应用的一些配置

还记得我们以下这个图不？

我认为 Header 应该是属于主应用，而下面的 Aside 和 Main 都是属于微应用， Aside 块一般都是用于展示菜单，个人认为各个微应用应该各自维护自己的菜单，而不是交由主应用维护。

所以，在微应用，我们还需要处理下左侧的菜单布局。

我们新增一个 Layout.vue 布局文件

至此，Vue3+TS+ElementPlus+Qiankun构建微应用项目的一个基本结构我们已经处理完成，整体运行看下效果：

首页

微应用

好了，基于 Vue3+TS+ElementPlus+Qiankun 的微应用项目基本框架我们已经搭建好了，后续就是慢慢填充一些工具和页面了。

相关源码地址：

•主应用： Anyin Cloud Parent

•微应用： Anyin Cloud Base

[1] Anyin Cloud :

[2] Anyin Cloud Parent:

[3] Anyin Cloud Base:

通俗易懂讲解vue.config.js的配置参数

贴上 官网

vue-cli3 创建的时候并不会自动创建vue.config.js，因为这个是个可选项，所以一般都是需要修改webpack的时候才会自己创建一个vue.config.js

再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，我们可以手动去创建vue.config.js 去修改默认的webpack。注意，只能叫vue.config.js。

publicPath （从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath）

参考：

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 ，则设置 publicPath 为 /my-app/。

这个值在开发环境下同样生效。如果你想把 开发服务器架设在根路径 ，你可以使用一个条件式的值：

通常开发环境，本地运行都会直接部署在根路径上，publicPath设置为'/'，访问地址是你的IP地址。如下是设置成'/app'的效果：

从上面可以得知，静态资源文件都是在app下的，所以在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径，可以发现项目会正常启动。一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。'/'就行。

结论： publicPath配置成'/aaa/bbb/ccc'， 则需在相应的服务器路径中新建aaabbbccc的文件夹，然后将打包后的文件放进去，就ok啦。

项目中，我会在.env.production文件中设置一个变量VUE_APP_BASE_URL ，项目打包后告诉相关人员 nginx 路由前缀是什么即可

outputDir

assetsDir

indexPath

filenameHashing

直观效果：当运行npm run build时，

打包后的文件后面都会带一个8位的hash值，那啥是个hash值？

在打包出来的文件名上加上文件内容的hash是目前最常见的有效使用浏览器长缓存的方法，js文件如果有内容更新，hash就会更新，浏览器请求路径变化所以更新缓存，如果js内容不变，hash不变，直接用缓存。（这段话是从别的文章里面参考的）。

将filenameHashing这个值设置为false试试，就不会带那个后缀hash值。

pages

lintOnSave

runtimeCompiler

transpileDependencies

productionSourceMap

crossorigin （不理解）

integrity

configureWebpack

chainWebpack

Css相关配置

devServer

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

补充知识

所谓的跨域就是不同源，不满足协议、域名、端口都相同的约定

同源

不同源 协议不同(https)

不同源 端口不同(90)

不同源 域名不同(demo)

当协议、域名、端口中任意一个不相同时，就是不同源。若不同源之间相互请求资源，就算作跨域

补充知识

反向代理（Reverse Proxy）方式是指以代理服务器来接受网络上的连接请求，然后将请求转发给内部网络上的服务器，并将服务器上得到的结果返回给请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。

修改config/index.js /vue.config.js文件（改完之后千万记得要重新 npm run dev）

host 将他的值修改为 0.0.0.0，代表可以访问本机所有的IP地址，让vue项目可通过localhost和IP同时访问。

port 设置端口号

open 是否在第一次编译时是自动打开浏览器

hot 开启为true，启动热重载，自动刷新页面

https

inline

overlay

targe 代理的服务器，也就是api要访问的服务器。

changeOrigin 允许跨域， 为false时，请求头中host仍然是浏览器发送过来的host;如果设置成true：发送请求头中host会设置成target的值

ws 是否代理websocket

pathRewrite 重写 url 的 path 部分

此文记录下来，方便自己遗忘的时候能够快速查阅，如有错误请指出。

参考链接：

这篇文章讲的也很详细