VUE-Router按模塊配置、懶加載+ Windows中Nginx服務安裝、配置解決404

habren 發布于2019-07-25 14:37 / 2562人閱讀

摘要：文章涉及到路由模塊化，懶加載，安裝，打包配置板塊。項目復雜，路由變多，代碼維護性降低，從路由模塊化開始一步步優化，解決各種。無法啟動服務，報錯參考資料發現端口沖突，已經在服務中已經配置端口。服務端口更改為。

文章涉及到VUE路由模塊化，懶加載，nginx安裝，打包配置板塊。
項目復雜，路由變多，代碼維護性降低，從路由模塊化開始一步步優化，解決各種BUG。參考了很多方法，會在文章中引用出來。

第一步、路由按模塊配置和懶加載配置

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"
// 信息內容頁
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"
// 引入信息內容頁 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: "豆漿豆花" },
    // 路由懶加載
    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項目打包

1.3.1 cmd執行代碼進行打包

npm run build

打包完成后，cmd 提示構建的文件應該通過HTTP服務器提供服務,不能直接打開index.html

 Tip: built files are meant to be served over an HTTP server.
 Opening index.html over file:// won"t work.

將打包后的文件放在虛擬主機中，通過域名可以成功訪問。
但是刷新頁面會報404

1.3.2解決問題

不能直接訪問靜態頁面，將項目放服務器中訪問。

第二步，Windos虛擬主機安裝nginx服務器

為什么不用tomcat？
vue的路由模式如果使用history，刷新會報404錯誤。
使用tomcat運行項目，在微信訪問網頁，如果獲取404后會跳轉到公益頁面。
nginx會捕獲，返回到index.html頁面
參考文章：為何選nginx配置

2.1 nginx的安裝
參考文章：Windows服務器下安裝Ngnix服務

虛擬主機使用Windows Server 2012
? 1 進入http://nginx.org/en/download....，下載Nginx windows版，本文使用1.14.2版
? 2進入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。將這兩個改名后的文件放置于解壓后的Ngnix文件夾中

? 5.將文件夾復制到Windows虛擬主機中【我直接放C盤，可更改】
??路徑 C:UsersAdministrator ginx

//cmd 進入到nginx文件 執行命令
//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服務,找到已經存在，如果可以啟動服務，就安裝正確。

? 7.無法啟動服務，報錯1067
? 參考資料發現80端口沖突，已經在IIS服務中已經配置80端口。IIS服務端口更改為8082。
? 參考文章：1607相關錯誤說明

? 8.啟動服務，訪問localhost:80. 可以訪問默認頁面

第三步，Nginx配置

參考文章：vue-route+webpack部署單頁路由項目，訪問刷新出現404問題

3.1、將打包好的文件放在nginx > html 文件夾中
??訪問頁面，發現回退有問題，需要對nginx.conf進行配置

3.2、nginx.conf 文件配置，添加代碼

3.3、重啟nginx后，問題就迎刃而解了。

3.4、可能會出現的問題，再次刷新頁面時，會展現空白頁面。
??頁面報錯，js出問題

Uncaught SyntaxError: Unexpected token <
Uncaught SyntaxError: Unexpected token <
Uncaught SyntaxError: Unexpected token <

nginx配置與代碼靜態資源打包方式不匹配

因為打包前配置了 config > index.js 文件

assetsPublicPath: "/",

將配置路徑還原，再次打包運行就沒問題了。

GPU云服務器云服務器 nginx404怎么解決 nginx的安裝與配置 nginx配置中開啟gzip ecs windows系統下安裝配置tomcat方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/40298.html

Vue Router history模式的配置方法及其原理

摘要：但如果要使用模式，我們需要在后端進行額外配置。模式的配置方法我們來看看官方文檔是教我們怎么配置的模式。模式的配置實踐及原理強烈建議閱讀這部分之前，先看一下的這部分文檔和這部分文檔。只配置前端的情況首先，我們將設置為，但不配置后端。始發于我的博客 ryougifujino.com，歡迎訪問留言。 vue-router分為hash和history模式，前者為其默認模式，url的表現形式為...

Richard_Gao 2019-08-30 11:04 評論0 收藏0
webpack4.x升級摘要

摘要：以為例，編寫來幫助我們完成重復的工作編譯壓縮我只要執行一下就可以檢測到文件的變化，然后為你執行一系列的自動化操作，同樣的操作也發生在這些的預處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發展很久以前，互聯網行業有個職位叫做軟件開發工程師在那個時代，大家可能...

levinit 2019-08-23 18:11 評論0 收藏0
用 Vue 全家桶二次開發 V2EX 社區

摘要：一開發背景為了全面的熟悉技術棧，結合的開放開發了這個簡潔版的。在線預覽來自官方以及的整理。當頁面刷新后也無法顯示，請查看控制臺的異步請求是否返回。一、開發背景為了全面的熟悉Vue+Vue-router+Vuex+axios技術棧，結合V2EX的開放API開發了這個簡潔版的V2EX。在線預覽 API來自官方以及djyde的整理。在線訪問請節制使用，跨域是通過Nginx配置反向代...

shiguibiao 2019-08-20 16:36 評論0 收藏0
Vue.js-狀態管理與Vuex

摘要：學習筆記狀態管理與狀態管理與非父子組件跨級組件和兄弟組件通信時，使用了中央事件總線的一個方法，用來觸發和接收事件，進一步起到通信的作用。倉庫包含了應用的數據狀態和操作過程。新建文件，并寫入的配置，會依賴此配置文件來使用編譯代碼。學習筆記：狀態管理與Vuex 狀態管理與Vuex 非父子組件（跨級組件和兄弟組件）通信時，使用了bus（中央事件總線）的一個方法，用來觸發和接收事件，進一步...

lykops 2019-08-23 16:03 評論0 收藏0
手挽手帶你學VUE：四檔 Vue-cli3 Vuex Vue-router

摘要：安裝過后到命令行執行檢查版本，如果彈出版本的話恭喜你安裝成功，我們開始進行下面的步驟了。全局安裝的包名稱由改成了。如果你已經全局安裝了舊版本的或，你需要先通過卸載它。中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。視頻教程由于思否不支持視頻外鏈，視頻請移步http://www.henrongyi.top 你能學到什么在這一期的學習進度中，我們會開始學習在我們工作開...

Sourcelink 2019-08-02 14:02 評論0 收藏0