VUE-Router按模块配置、懒加载+ Windows中Nginx服务安装、配置解决404

habren 发布于2019-07-25 14:37 / 2499人阅读

摘要：文章涉及到路由模块化，懒加载，安装，打包配置板块。项目复杂，路由变多，代码维护性降低，从路由模块化开始一步步优化，解决各种。无法启动服务，报错参考资料发现端口冲突，已经在服务中已经配置端口。服务端口更改为。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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