① 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 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.js-2.0路由怎麼用路由怎麼配置
方法/步驟
首先，先來講個小東西吧。我個人一般在開發的時候都會將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.js組件化開發框架的應用。謝謝大家。
④ vue的多頁面配置
如何使用項目
項目改造過程
可以通過/sign,/test訪問頁面 7. 上面這種模式打包上線的時候需要後台的配置，(比如打包後的文件都在build文件夾下),nginx配置如下
server {
listen 3088;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
root /usr/share/nginx/html/build;
index index.html index.htm;
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
location /sign {
try_files $uri $uri/ /sign.html;
}
location /test {
try_files $uri $uri/ /test.html;
}
}
上面的配置就能直接訪問www.host:3388/sign,www.host:3388/test,這樣整體的多頁面配置就完成了。
通過node啟動一個伺服器來渲染多個html頁面
⑤ vue項目環境變數配置的實現方法
問題
實際開發中，開發環境和生產環境中一些變數是不同的，比如介面地址等等，打包之前需要手動切換。
編譯時
新建env.js
let
baseUrl
=
'';
if(process.env.NODE_ENV
==
'proction'){
baseUrl
=
'https://xxxxxxxxx';
}
else
if
(process.env.NODE_ENV
==
'development')
{
baseUrl
=
'/api'
}
export
{
baseUrl
}
process.env.NODE_ENV
是通過webpack
內置的
DefinePlugin
為所有的依賴定義的變數
webpack.dev.conf.js
new
webpack.DefinePlugin({
'process.env.NODE_ENV':
'development'
}),
webpack.prod.conf.js
new
webpack.DefinePlugin({
'process.env.NODE_ENV':
'proction'
}),
這樣在項目任意文件中都能調用process.env.NODE_ENV變數，本人測試過，process並不是掛載在window變數上，猜測可能是掛載到了node的process變數。
在運行腳本編譯項目的時候，會根據變數值的不同，設置不同的baseUrl。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:vue-cli配置環境變數的方法
⑥ Vue多環境配置--切換生產環境、測試環境和開發環境
情況二：使用cli3.x或者4.x沒有build和config文件夾
1、根目錄下新建文件：.env.development（開發環境）、.env.test（測試環境）、.env.proction文件（生產環境）
2、三個配置文件的配置內容如下：
.env.development（開發環境）配置內容
.env.test（測試環境）配置內容
.env.proction文件（生產環境）配置內容
3、修改vue.config.js
mole.exports = { // 基本路徑，相對路徑 publicPath: "./", // 輸出文件目錄 outputDir: process.env.outputDir,}
4、修改package.json文件
5、判斷並使用不用的開發環境配置
⑦ 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項目啟動過程以及配置
我們點擊 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.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在調試時候,對Vue環境配置應該如何設置。如何改變Vue環境的埠
一般是在webpack當中配置。
可以直接搜索你當前的埠號，找到相應的文件，進行修改後重新啟動，就可以看到埠號的改變了。