vue-cli3.0实现一个多页面应用的历奇经历记录总结

 更新时间:2020年03月16日 08:51:43   作者:wangliang_001  
这篇文章主要介绍了vue-cli3.0实现一个多页面应用的历奇经历,总结分析了vue-cli3.0实现一个多页面应用遇到的问题与相关操作注意事项,需要的朋友可以参考下

本文实例讲述了vue-cli3.0实现一个多页面应用的历奇经历。分享给大家供大家参考,具体如下:

故事背景

这是在刚请完假回来,一切都在计划之中,早上一来,就接到项目经历的新的需求(这个是烂摊子,已经好几个人接手,离职),我内心是拒绝的,可最后办法,没有其他人去做,最后就落在了我头上。

接到需求,先看了需求,跟以前的比起来,改动挺大,数据结构全改了,如果在原来的基础上改,成本有点大,所以,就想着重启项目来实现。于是就使用vue的最新脚手架工具vue-cli3.0来初始化项目,但突然,一个会议又来了,项目经理,评估了工作,觉得另一个同事的工作量太大,于是又把后台的一部分功能甩给我来实现,当时内心是mmp的。

本来项目是做的是单页应用,而新分配给我的功能,页面也不多,功能也不算太复杂,就不想再单独启一个工程,就想着把这个功能,做在现有的工程里,但是呢,这是两个完全没有关联的功能,于是乎,多页面应用在脑子中呼之欲出。

于是开始了从单页面应用改造成多页面应用的过程。

一、初始化项目

使用vue3.0创建一个项目,项目默认是单页应用,目录如下:

|-node_modules
|-public
	|-favicon.ico
	|-index.html
|-src
	|-assets
	|-components
	|-store
	|-views
	|-App.vue
	|-main.js
|-.browserslistrc
|-.env.development
|-.env.production
|-.eslintrc.js
|-.gitignore
|-.prettierrc.js
|-babel.config.js
|-package.json

二、将单页应用修改成多面应用

1.(必选)在src文件下新增文件夹,每个文件夹代表一个独立的页面,文件夹里都含有App.vue,main.js,router.js文件

2.(必选)在src文件下新增配置文件vue.config.js

3.(可选)在src文件下新增文件store.js,可存储数据,被每个独立页面都可取到

4.(可选)删除原先src文件下的App.vue,main.js文件
————————————————
最终文件目录如下:

|-node_modules
|-public
	|-favicon.ico
	|-index.html
|-src
	|-api
	|-assets
	|-components
	|-store
	|-styles
	|-utils
	|-views
		|-admin
			 |-App.vue
			 |-main.js
			 |-index.vue
			 |-router.js
		|-front
			 |-App.vue
			 |-main.js
			 |-index.vue
			 |-router.js
|-.browserslistrc
|-.env.development
|-.env.production
|-.eslintrc.js
|-.gitignore
|-.prettierrc.js
|-babel.config.js
|-package.json
|-vue.config.js

三、配置vue.config.js

在该文件下添加每个页面的入口,出口,模板文件,具体配置如下:

在这里插入图片描述

配置好后,直接通过npm run serve启动项目,发现一切正常,于是,就开始愉快地编码,打开浏览器:http://192.168.0.28:8080/front,看效果:

在这里插入图片描述

一切都很完美,于是开始打包,熟练地在命令行敲下 npm run build , 看着进度条一点点走着,内心也是有点小激动的,打包完成,看看打包目录:

在这里插入图片描述

先利用http-server启一个服务,然后去访问:http://192.168.0.28:8080/front.html
结果页面空白??? 这是什么情况?

于是,我慢慢回想,发现了有点异常,在开发环境,我访问是http://192.168.0.28:8080/front,而在http-server服务器上我访问是却是http://192.168.0.28:8080/front.html。于是我将http-server上的地址改为http://192.168.0.28:8080/front, 结果却是404.后来一想,这应该是vue路由的模式为history导致,于是尝试去改为hash, 发现也并不起作用,后来看文档,发现vue-cli3.0开发多页面应用,默认为history模式。怎么办呢,于是又想着从路由着手,将routes中的path改为xxx.html,实现代码如下:

在这里插入图片描述

这下再通过http://192.168.0.28:8080/front.html去访问,可以了,哈哈,内心有点小开心,然后将打包后的代码上传,提交给后台同学,让其去集成。一集成,又出问题啦,页面又空白啦,一开始脑子里想,是不是publicPath不对呀,但一看也没问题,我用的是相对路径,请求也都发了,就是空白,后来,后台的同学说,将项目部署在根目录下,就可以访问,我一听,想可能是路径问题,于是科在路由中加入了base选项,代码如下:

在这里插入图片描述
再打包,给后台同学集成,终于大功告成,通过这次经历,也算收获颇多,故记录下来,以共勉!

希望本文所述对大家vue.js程序设计有所帮助。

相关文章

  • Vue如何根据角色获取菜单动态添加路由

    Vue如何根据角色获取菜单动态添加路由

    这篇文章主要介绍了Vue如何根据角色获取菜单动态添加路由,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue3项目导入异常Error:@vitejs/PLUGIN-vue requires vue (>=3.2.13)解决办法

    vue3项目导入异常Error:@vitejs/PLUGIN-vue requires vue (>=3.2.13

    这篇文章主要给大家介绍了关于vue3项目导入异常Error:@vitejs/PLUGIN-vue requires vue (>=3.2.13)的解决办法,文中将解决办法介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 前端axios取消请求总结详解

    前端axios取消请求总结详解

    这篇文章主要为大家介绍了前端axios取消请求总结示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • Vue中使用echarts实现绘制人体动态图

    Vue中使用echarts实现绘制人体动态图

    这篇文章主要为大家详细介绍了Vue中如何使用echarts实现绘制人体动态图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • 详解Vue3 SFC 和 TSX 方式调用子组件中的函数

    详解Vue3 SFC 和 TSX 方式调用子组件中的函数

    在使用 .vue 定义的组件中,setup 中提供了 defineExpose() 方法,该方法可以将组件内部的方法暴露给父组件,这篇文章主要介绍了Vue3 SFC 和 TSX 方式调用子组件中的函数,需要的朋友可以参考下
    2022-10-10
  • Vue中的侦听器及使用场景

    Vue中的侦听器及使用场景

    Vue中的侦听器是一种响应式机制,可以对指定的数据进行监听,并在数据变化时执行相应的回调函数。常用于监听复杂数据类型的变化,如对象和数组。通过侦听器,可以实现数据的自动更新和逻辑处理等功能,提高代码的可读性和可维护性
    2023-05-05
  • web前端vue之vuex单独一文件使用方式实例详解

    web前端vue之vuex单独一文件使用方式实例详解

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这篇文章主要介绍了web前端vue:vuex单独一文件使用方式,需要的朋友可以参考下
    2018-01-01
  • Vue 内置指令梳理总结

    Vue 内置指令梳理总结

    这篇文章主要介绍了Vue 内置指令梳理总结,文章首先从v-text指令展开内容介绍,具有一定的知识性参考价值,需要的小伙伴可以参考一下
    2022-05-05
  • vue中点击切换按钮功能之点启用后按钮变为禁用

    vue中点击切换按钮功能之点启用后按钮变为禁用

    这篇文章主要介绍了vue中点击切换按钮功能之点启用后按钮变为禁用功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-09-09
  • Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

    Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

    今天很郁闷,遇到这样一个奇葩问题,使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错误,折腾半天才解决好,下面小编把Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案分享给大家,需要的朋友一起看看吧
    2018-05-05

最新评论