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: '/',

将配置路径还原，再次打包运行就没问题了。