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

文章涉及到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

<configuration>
  
  <!-- ID of the service. It should be unique accross the Windows system-->
  <id>Nginx</id>
  <!-- Display name of the service -->
  <name>Nginx Service (powered by WinSW)</name>
  <!-- Service description -->
  <description>This service is a service cratead from a minimal configuration</description>
  
  <!-- Path to the executable, which should be started -->
  <executable>%BASE%\nginx.exe</executable>
  <logpath>%BASE%\logs</logpath>
  <startarguments>-p %BASE%\nginx.exe</startarguments>
  <stopexecutable>%BASE%\nginx.exe</stopexecutable>
  <stoparguments>-s stop</stoparguments>

 <configuration>

  4.將WinSW.NET4.exe文件更名爲mynginx.exe，將sample-minimal.xml文件更名爲mynginx.xml。將這兩個更名後的文件放置於解壓後的Ngnix文件夾中

  5.將文件夾複製到Windows虛擬主機中【我直接放C盤，可更改】
  路徑 C:\Users\Administrator\nginx

//cmd 進入到nginx文件 執行命令
//mynginx.exe install

C:\Users\Administrator\nginx>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.一、將打包好的文件放在nginx > html 文件夾中
  訪問頁面，發現回退有問題，須要對nginx.conf進行配置

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

3.三、重啓nginx後，問題就迎刃而解了。

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

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

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

由於打包前配置了 config > index.js 文件

assetsPublicPath: '/',

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