⑴ vue cli4.0 配置環境變數
------------------正文開始------------------
開發項目時，經常會需要在不同環境中切換。那麼我們如何配置不同的環境變數呢？
為了更加方便消化本文章，建議先看下官方文檔：
環境變數和模式
看完官方的文檔如果還沒有明白，可以參考本文。
在vue-cli 構建的項目中，默認有3種模式，如下圖：
我個人的理解就是：
你執行npm run serve時，對應的環境就是開發環境；
你執行npm run build時，對應的環境就是生產環境。
如果你開發的項目中，不止該3種，該咋整呢？像在我開發的項目中，就有本地環境(local)、開發環境(development)、測試環境(devtest)、預發布環境(beta)、生產環境(proction)。請記住我括弧裡面的英文。
來，左邊跟我一起畫個龍，在你右邊兒畫一道彩虹 畫完了，開始進入主題了
------------------進入主題------------------
如官方文檔所說，通過為.env文件增加後綴來設置某個模式下特有的環境變數。我這里有5個環境，所以配置了5個.env文件。如下圖：
基本格式如下：
<pre>NODE_ENV=環境名稱
VUE_APP_URL=對應的環境地址</pre>
如我本地環境的配置就如下圖所示：
我本地是用的easy-mock模擬的數據，所以配置的地址是mock介面地址。
如官方文檔所說，可以通過傳遞 --mode 來配置不同的模式。我自己的項目配置如下圖：
請注意我配置文件中的 serve 與 build 。
文件已創建好，配置語句也已寫好。怎麼用它呢？
首頁你需要哪個環境，就執行哪個環境的命令語句。
比如我現在需要local環境，就執行 npm run local-serve 。如下圖所示：
然後通過 process.env.NODE_ENV 獲取環境名；通過 process.env.VUE_APP_URL 獲取環境對應的url。
比如我們在axios請求中，就可以把它的baseURL設置為 process.env.VUE_APP_URL ，如下圖所示：
後面的"/web"是根據我自己介面來的，你別也寫個"/web"。
如果你不確定你自己現在是在哪個環境變數下，可以 console.log("當前環境變數："+process.env.NODE_ENV) 和 console.log("當前環境路徑："+process.env.VUE_APP_URL) 看下。
像我的項目中就是下面這2個東東：
輸出的內容就是.env.local文件裡面配置的環境變數。
為了更好的理解，我們再執行一條語句， npm run serve ,看看此時的環境變數是哪個？
為什麼呢？
因為 npm run serve 默認指向.env.developement，我在裡面配置的環境就是上面輸出的內容。.env.developement的配置如下圖：
總而言之就是，你需要哪個環境變數，就 【npm run 對應的環境變數】 就完事了！
⑵ Vue多頁面應用配置
最近由於工作驅動，項目包含pc端及mobile端，pc端和mobile端核心功能一致，最大的不同是UI,為了減少維護的成本，決定使用Vue的多頁面開發。
項目線上部署在一個子目錄下，為了解決在本地和線上路徑保持一致，需要修改一些配置。所以以此篇文章來記錄一下配置過程中的問題。
這里是我放在github上的項目，裡面有整個配置文件。感興趣的朋友可以參考一下： vue-multiple-page
此篇文章記錄了先在根路徑下的多頁面配置，再從根路徑修改成子路徑的配置
vue腳手架vue-cli3及以上；
在本地用vue-cli新建一個項目；
vue3.js :路由配置修改的是 history: createWebHistory('/mobile/')
vue3.js :路由配置修改的是 history: createWebHistory('/e/')
mobile端mobile.js的base修改成 base: '/e/mobile'
vue3.js :路由配置修改的是 history: createWebHistory('/e/mobile')
特別注意的地方
⑶ Vue項目啟動過程以及配置
我們點擊 npm run dev 的時候，這就是啟動 Vue 工程項目，那麼它啟動過程是什麼樣的呢？ Vue 項目啟動過程，本文簡要介紹。
在執行 npm run dev 的時候，會在當前目錄中尋找 package.json 文件，包含項目的 名稱版本 、 項目依賴 等相關信息。
從下圖中可以看到， 啟動 npm run dev 命令後，會載入 build/webpack.dev.conf.js 配置並啟動 webpack-dev-server 。
webpack.dev.conf.js 中引入了很多模塊的內容，其中就包括 config 目錄下伺服器環境的配置文件。
可以看到，在 index.js 文件中包含伺服器 host 和 port 以及入口文件的相關配置，默認啟動埠是 8080 ，這里可以進行修改。
index.html 的內容很簡單，主要是提供一個 div 給 vue 掛載。
main.js 中， 引入了 vue 、 App 和 router 模塊， 創建了一個 Vue 對象，並把 App.vue 模板的內容掛載到 index.html 的 id 為 app 的 div 標簽下， 並綁定了一個路由配置。
上面 main.js 把 App.vue 模板的內容，放置在了 index.html 的 div 標簽下面。查看 App.vue 的內容我們看到，這個頁面的內容由一個 logo 和一個待放置內容的 router-view ， router-view 的內容將由 router 配置決定。
查看 route 目錄下的 index.js ，我們發現這里配置了一個路由， 在訪問路徑 / 的時候， 會把 HelloWorld 模板的內容放置到上面的 router-view 中。
HelloWorld 中主要是一些 Vue 介紹顯示內容。
所以，頁面關系組成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。
到這，我們開始安裝 router 、 vuex 。
Ctrl+C 退出啟動，繼續執行 vue-cli ，腳手架安裝插件 router 和 vuex 開始。
輸入一個大寫Y，按下Enter
vuex 是專門為 Vue.js 設計的狀態管理庫，以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。
Vuex 主要有五部分：
① 安裝 vuex
接下來我們在 src目錄 下創建一個 vuex 文件夾
並在 vuex文件夾 下創建一個 store.js 文件
文件夾目錄 長得是這個樣子
在保證我們處於我們項目下，在命令行輸入下面命令，然後，安裝 vuex 。
② vuex 的關系圖
③ 開始使用，在 mian.js 中，引入 vuex
④然後告知 vue 開始使用 vuex (Vue.use(Vuex))
在 store.js 文件中，引入 vuex 並且使用 vuex ，這里注意我的變數名是大寫 Vue 和 Vuex
⑤接下來，在main.js中引入store
到這里算是，以及完成了。
我們再重新看一下此時的項目結構，多了router.js和store.js，其它相關的文件也被修改
⑷ vue框架idea運行配置是哪個
idea不需要運行配置 vue腳手架有個package-json文件夾 配置下圖
⑸ 求解答關於Vue.config.js文件的詳細配置
這里是創建代理伺服器，訪問的時候會通過代理伺服器轉發，所以就不會出現跨域問題。
這里的配置是以"/api"開頭的地址，都通過代理訪問，其他的地址則不通過代理，後面的是代理地址。
⑹ 通俗易懂講解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）
參考： https://my.oschina.net/u/4446873/blog/4882847
默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.xxx.com/ 。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.xxx.com/my-app/ ，則設置 publicPath 為 /my-app/。
這個值在開發環境下同樣生效。如果你想把 開發伺服器架設在根路徑 ，你可以使用一個條件式的值：
通常開發環境，本地運行都會直接部署在根路徑上，publicPath設置為'/'，訪問地址是你的IP地址。如下是設置成'/app'的效果：
從上面可以得知，靜態資源文件都是在app下的，所以在dist下新增添一個app目錄，把dist下文件放到app下，相當於一個文件的路徑，可以發現項目會正常啟動。一般nginx都會配置一個靜態資源目錄，打包後的文件都會放到這個靜態資源目錄裡面，nginx去做映射，所以publicPath這個屬性基本不用改。'/'就行。
結論： publicPath配置成'/aaa/bbb/ccc'， 則需在相應的伺服器路徑中新建aaa>bbb>ccc的文件夾，然後將打包後的文件放進去，就ok啦。
項目中，我會在.env.proction文件中設置一個變數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
proctionSourceMap
crossorigin （不理解）
integrity
configureWebpack
chainWebpack
Css相關配置
devServer
如果你的前端應用和後端 API 伺服器沒有運行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 伺服器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。
補充知識
所謂的跨域就是不同源，不滿足協議、域名、埠都相同的約定
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 協議不同(https)
http://www.test.com:90/index.html 不同源 埠不同(90)
http://www.demo.com/index.html 不同源 域名不同(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 部分
此文記錄下來，方便自己遺忘的時候能夠快速查閱，如有錯誤請指出。
參考鏈接：
https://www.jianshu.com/p/b358a91bdf2d
https://www.jb51.net/article/174200.htm
https://blog.csdn.net/liu_yunzhao/article/details/90520028
這篇文章講的也很詳細 https://blog.csdn.net/guozhangqiang/article/details/87197870
⑺ vue路由配置
首先，先來講個小東西吧。我個人一般在開發的時候都會將ESLint關閉掉。在新建一個項目的時候，會提示你安裝否。選擇n就行了。也就是no。見下圖！如果你不心安裝了。也沒事。在項目的配置文件中找到它注釋掉即可。
首先第一步，在components文件夾里新建兩個.vue文件。將用它們來路由頁面。並且分別取名router1.router2
接下來，我們就開始配置路由了。首先說幾個准備思路吧。第一：頁面打開後是要有默認顯示頁的（默認的路由），第二，同時實現路由切換時像JStab切換效果。接下來，我們要在app.vue里寫好2個導航命名為router1和router2。分別用來將router2,router1路由進來。（在這之前請把hello.vue的內容清空，才能看到現面第二張圖的效果）
現在基本的准備工作已經做好了。現在看到min.js文件。我個人的習慣是喜歡把路由的配置寫在這里或者引入到這里。不習慣放在router文件夾下面的index.js。請看下圖片。首先將。原始的router引入的改成VueRouter。然後引入之前新建好的兩個.vue文件。記得要use一下。最後創建一個router實例。第一個path / 表示的意思是默認路由進來的組件。也就是router1.
到了這里就差最後一步了。回到app.vue。寫上路由。分別給router1,router2加上路由標簽。router-link標簽渲染時會自動增加一個A標簽帶href路轉。後面的to='',就是將要路由到哪裡去的min.js中的path路徑。to="/"表示此處將路由顯示出min.js路由配置中path為/的component。最後，router-view標簽是將路由過來的組件渲染在什麼地方。這里寫在了導航下面。效果請看第二，第三張圖片。第二張圖片就是默認進來的路由頁面。也就是router1.地址欄中的路徑就是首頁。第三張圖地址欄中路徑變了，而且內容也變了。說明路由成功。
最後給路由的導航加上像JS一樣的tab切換效果。用到VUE路由中自有的類。router-link-active.意思是在路由激活時更變的class.看圖。在style中寫好css.頁面上就可以看到默認顯示的路由組件導航就有class了。不過此時，你已經成功了一半了。因為請看下面第三張圖片。當點擊router2的時候，出現了兩個紅色字體。這下尷尬了。
⑻ 在vue-cli3.0中配置webpack
在vue-cli3.0中，對各種配置文件進行了合並，若要進行webpack相關配置，需要在項目根目錄下新建vue.config.js文件
在 vue.config.js 中的 configureWebpack 選項提供一個對象：
提示：有些webpack設置選項是基於vue項目設置的，為了保證vue可以正常工作，某些webpack的配置需要遵從vue提供的配置選項，例如
如果你熟悉webpack，你已經可以開始配置項目了
擴展：鏈式操作---jquery那般的鏈式書寫方式
官方文檔： https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F