資訊專欄INFORMATION COLUMN
摘要：文章涉及到路由模塊化，懶加載，安裝，打包配置板塊。項(xiàng)目復(fù)雜，路由變多，代碼維護(hù)性降低，從路由模塊化開始一步步優(yōu)化，解決各種。無法啟動(dòng)服務(wù)，報(bào)錯(cuò)參考資料發(fā)現(xiàn)端口沖突，已經(jīng)在服務(wù)中已經(jīng)配置端口。服務(wù)端口更改為。
文章涉及到VUE路由模塊化，懶加載，nginx安裝，打包配置板塊。
項(xiàng)目復(fù)雜，路由變多，代碼維護(hù)性降低，從路由模塊化開始一步步優(yōu)化，解決各種BUG。參考了很多方法，會(huì)在文章中引用出來。
第一步、路由按模塊配置和懶加載配置
1.1 普通路由配置
文件路徑： src > router > index.js
引入組件
import Vue from "vue" import Router from "vue-router" // 首頁 import home from "@/pages/home/Home" import homeOne from "@/pages/home/components/One" import homeTwo from "@/pages/home/components/Two" // 信息內(nèi)容頁 import info from "@/pages/info/Info" import infoDetail from "@/pages/info/detail/InfoDetail"
配置路由
routes: [
{
path: "/",
component: home,
children: [
{ path: "homeOne", component: homeOne },
{ path: "homeTwo", component: homeTwo },
]
},
{
path: "/info",
meta: { title: "test" },
component: info
},
{
path: "detail/:id",
component: infoDetail
}
]
1.2 路由按模塊配置
文件路徑： src > router > index.js
新建文件： src > router > home.js
新建文件： src > router > info.js
index.js
import Vue from "vue"
import Router from "vue-router"
// 引入首頁 home.js
import home from "./home"
// 引入信息內(nèi)容頁 info.js
import info from "./info"
Vue.use(Router)
export default new Router({
mode: "history",
routes: [
// 加載路由
...home,
...info
]
})
home.js
// 主頁面路由
export default [
{
path: "/",
name: "home",
meta: { title: "豆?jié){豆花" },
// 路由懶加載
component: resolve => require(["@/pages/home/Home"], resolve),
// 子路由
children: [
{
path: "homeone",
// 路由懶加載
component: resolve => require(["@/pages/home/components/One"], resolve)
},
{
path: "hometwo",
component: resolve => require(["@/pages/home/components/Two"], resolve)
}
]
}
]
info.js
// 信息頁面路由
export default [
{ // 信息主頁面
path: "/info",
name: "info",
meta: { title: "豆汁" },
// 路由懶加載
component: resolve => require(["@/pages/info/Info"], resolve)
},
{ // 信息頁面 傳參
path: "detail/:id",
// 路由懶加載
component: resolve => require(["@/pages/info/detail/InfoDetail"], resolve)
}
]
參考文章：Vue 2.x框架完善（二）—— vue路由按模塊配置
1.3項(xiàng)目打包
1.3.1 cmd執(zhí)行代碼進(jìn)行打包
npm run build
打包完成后，cmd 提示構(gòu)建的文件應(yīng)該通過HTTP服務(wù)器提供服務(wù),不能直接打開index.html
Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won"t work.
將打包后的文件放在虛擬主機(jī)中，通過域名可以成功訪問。
但是刷新頁面會(huì)報(bào)404
1.3.2解決問題
不能直接訪問靜態(tài)頁面，將項(xiàng)目放服務(wù)器中訪問。
第二步，Windos虛擬主機(jī)安裝nginx服務(wù)器
為什么不用tomcat？
vue的路由模式如果使用history，刷新會(huì)報(bào)404錯(cuò)誤。
使用tomcat運(yùn)行項(xiàng)目，在微信訪問網(wǎng)頁，如果獲取404后會(huì)跳轉(zhuǎn)到公益頁面。
nginx會(huì)捕獲，返回到index.html頁面
參考文章：為何選nginx配置
2.1 nginx的安裝
參考文章：Windows服務(wù)器下安裝Ngnix服務(wù)
虛擬主機(jī)使用Windows Server 2012
? 1 進(jìn)入http://nginx.org/en/download....，下載Nginx windows版，本文使用1.14.2版
? 2進(jìn)入https://github.com/kohsuke/wi...，下載winsw
? 3修改下載好的sample-minimal.xml
Nginx Nginx Service (powered by WinSW) This service is a service cratead from a minimal configuration %BASE% ginx.exe %BASE%logs -p %BASE% ginx.exe %BASE% ginx.exe -s stop
? 4.將WinSW.NET4.exe文件改名為mynginx.exe，將sample-minimal.xml文件改名為mynginx.xml。將這兩個(gè)改名后的文件放置于解壓后的Ngnix文件夾中
? 5.將文件夾復(fù)制到Windows虛擬主機(jī)中【我直接放C盤，可更改】
??路徑 C:UsersAdministrator
ginx
//cmd 進(jìn)入到nginx文件 執(zhí)行命令 //mynginx.exe install C:UsersAdministrator ginx>mynginx.exe install 2019-01-18 10:10:15.984 INFO - Installing the service width id "Nginx"
? 6.查看windows服務(wù),找到已經(jīng)存在，如果可以啟動(dòng)服務(wù)，就安裝正確。
? 7.無法啟動(dòng)服務(wù)，報(bào)錯(cuò)1067
? 參考資料發(fā)現(xiàn)80端口沖突，已經(jīng)在IIS服務(wù)中已經(jīng)配置80端口。IIS服務(wù)端口更改為8082。
? 參考文章：1607相關(guān)錯(cuò)誤說明
? 8.啟動(dòng)服務(wù)，訪問localhost:80. 可以訪問默認(rèn)頁面
第三步，Nginx配置
參考文章：vue-route+webpack部署單頁路由項(xiàng)目，訪問刷新出現(xiàn)404問題
3.1、將打包好的文件放在nginx > html 文件夾中
??訪問頁面，發(fā)現(xiàn)回退有問題，需要對(duì)nginx.conf進(jìn)行配置
3.2、nginx.conf 文件配置，添加代碼
3.3、重啟nginx后，問題就迎刃而解了。
3.4、可能會(huì)出現(xiàn)的問題，再次刷新頁面時(shí)，會(huì)展現(xiàn)空白頁面。
??頁面報(bào)錯(cuò)，js出問題
Uncaught SyntaxError: Unexpected token < Uncaught SyntaxError: Unexpected token < Uncaught SyntaxError: Unexpected token <
nginx配置與代碼靜態(tài)資源打包方式不匹配
因?yàn)榇虬芭渲昧?config > index.js 文件
assetsPublicPath: "/",
將配置路徑還原，再次打包運(yùn)行就沒問題了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/40298.html
摘要：但如果要使用模式，我們需要在后端進(jìn)行額外配置。模式的配置方法我們來看看官方文檔是教我們?cè)趺磁渲玫哪Ｊ?。模式的配置?shí)踐及原理強(qiáng)烈建議閱讀這部分之前，先看一下的這部分文檔和這部分文檔。只配置前端的情況首先，我們將設(shè)置為，但不配置后端。 始發(fā)于我的博客 ryougifujino.com，歡迎訪問留言。 vue-router分為hash和history模式，前者為其默認(rèn)模式，url的表現(xiàn)形式為...
摘要：以為例，編寫來幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測(cè)到文件的變化，然后為你執(zhí)行一系列的自動(dòng)化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對(duì)第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個(gè)職位叫做 軟件開發(fā)工程師 在那個(gè)時(shí)代，大家可能...
摘要：一開發(fā)背景為了全面的熟悉技術(shù)棧，結(jié)合的開放開發(fā)了這個(gè)簡(jiǎn)潔版的。在線預(yù)覽來自官方以及的整理。當(dāng)頁面刷新后也無法顯示，請(qǐng)查看控制臺(tái)的異步請(qǐng)求是否返回。 一、開發(fā)背景 為了全面的熟悉Vue+Vue-router+Vuex+axios技術(shù)棧，結(jié)合V2EX的開放API開發(fā)了這個(gè)簡(jiǎn)潔版的V2EX。 在線預(yù)覽 API來自官方以及djyde的整理。 在線訪問請(qǐng)節(jié)制使用，跨域是通過Nginx配置反向代...
摘要：學(xué)習(xí)筆記狀態(tài)管理與狀態(tài)管理與非父子組件跨級(jí)組件和兄弟組件通信時(shí)，使用了中央事件總線的一個(gè)方法，用來觸發(fā)和接收事件，進(jìn)一步起到通信的作用。倉庫包含了應(yīng)用的數(shù)據(jù)狀態(tài)和操作過程。新建文件，并寫入的配置，會(huì)依賴此配置文件來使用編譯代碼。 學(xué)習(xí)筆記：狀態(tài)管理與Vuex 狀態(tài)管理與Vuex 非父子組件（跨級(jí)組件和兄弟組件）通信時(shí)，使用了bus（中央事件總線）的一個(gè)方法，用來觸發(fā)和接收事件，進(jìn)一步...
摘要：安裝過后到命令行執(zhí)行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進(jìn)行下面的步驟了。全局安裝的包名稱由改成了。如果你已經(jīng)全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個(gè)都有一個(gè)字符串的事件類型和一個(gè)回調(diào)函數(shù)。 視頻教程 由于思否不支持視頻外鏈，視頻請(qǐng)移步http://www.henrongyi.top 你能學(xué)到什么 在這一期的學(xué)習(xí)進(jìn)度中，我們會(huì)開始學(xué)習(xí)在我們工作開...
閱讀 1135·2021-10-09 09:43
閱讀 18652·2021-09-22 15:52
閱讀 1077·2019-08-30 15:44
閱讀 3071·2019-08-30 15:44
閱讀 3260·2019-08-26 14:07
閱讀 922·2019-08-26 13:55
閱讀 2581·2019-08-26 13:41
閱讀 3103·2019-08-26 13:29
