vue3沒有configjs（vue3沒有config）

本文目錄一覽：

• 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 部分

此文記錄下來，方便自己遺忘的時候能夠快速查閱，如有錯誤請指出。

參考鏈接：

這篇文章講的也很詳細