首页 > 其他分享 >vue多页面应用

vue多页面应用

时间:2024-05-08 09:01:51浏览次数:22  
标签:documentManage index vue uri personManage html 应用 pages 页面

多页面应用本身和单页面应用没什么差别,无非是多了几个入口点。
入口点多的话,还可以写个函数扫描路径取添加入口点。
比较让人好奇的是路径的问题。我们要开发的时候要体现目录层级接口,所以入口文件是一层套一层的。但是部署后访问路径应该很短才行,最好是顶级路径。但这又只能改目录层级结构。
实际上这个功能是web服务器的路径重写完成的,并不是在项目中完成的。
比如这个路径

build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        personManage: resolve(__dirname, './src/pages/personManage/index.html'),
        documentManage: resolve(__dirname, './src/pages/documentManage/index.html')
      }
    }
  }

在浏览器里面要输入一长串
我们实际上要输入http://localhost:5234/src/pages/personManage/index.html
但希望的是输入http://localhost:5234/personManage
这可以配置路径
vite的开发服务器是这样配置

import rewriteAll from 'vite-plugin-rewrite-all';
server: {
  // 自定义路由配置
  proxy: {
    '/personManage': '/src/pages/personManage/index.html',
    '/documentManage': '/src/pages/documentManage/index.html'
  }
}

nginx是这样配置

location / {
      root /path/to/your/dist;
      try_files $uri $uri/ /index.html;
  }

  location /personManage {
      try_files $uri $uri/ /pages/personManage/index.html;
  }

  location /documentManage {
      try_files $uri $uri/ /pages/documentManage/index.html;
  }

标签:documentManage,index,vue,uri,personManage,html,应用,pages,页面
From: https://www.cnblogs.com/ggtc/p/18178894

相关文章

  • 【vue3入门】-【0】前言
    本人是一名四年的软件测试人员,想努力向测试开发方向发展,因此在学习的道路上不停在探索。软件测试所需要的知识面太过庞大,但感觉好的测试开发都是会写前端的,也算是在模仿前辈们的脚步前进,希望不会让自己太受打击了,哈哈哈。对于前端,其实是断断续续有在接触,包括html、css、js,但是苦......
  • 【vue3入门】-【20】组件注册方式
    组件注册方式一个vue组件在使用前需先被“注册”,这样vue才能在渲染模版是找到其对应的实现。组件注册有两种方式:全局注册和局部注册全局注册在最外层注册一次,在最内层组件都能使用main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importHeaderfrom......
  • 【vue3入门】-【21】 组件传递数据
    组件传递数据_Props静态数据传递组件与组件之间不是完全独立的,而是有交集的,那就是组件与组件之间是可以传递数据的传递数据的解决方案就是propsapp.vue<template><!--主要要生效Header中的样式,需要删除main.json中默认的main.css样式--><!--不需要再次引入,可以直接使......
  • 【vue3入门】-【22】 组件事件
    组件事件在组件的模版表达式中,可以直接使用$emit方法触发自定义事件触发自定义事件的目的是组件之间传递数据,通过组件事件可以实现子级传递参数给父级App.vue<template><ComponentEvent/></template><script>importComponentEventfrom"./components/componentEvent.......
  • 页面嵌套,界面套娃,除了用iframe,还有其他方式吗?
    ​ UIOTOS可以了解下,uiotos.net,通过连线来代替脚本逻辑开发,复杂的交互界面,通过页面嵌套轻松解决,是个很新颖的思路,前端零代码!蓝图连线尤其是独创的页面嵌套和属性继承技术,好家伙相当于把vue的组件化、增量式面向对象开发,直接搬到前端拖拽工具上,无代码编程了。总的来说,这上面的......
  • Vue2进阶语法
    Vue进阶语法【一】v-model修饰符v-model:针对input标签实现数据双向绑定#lazy:等待input框的数据绑定失去焦点之后再变化#number:数字开头,只保留数字,后面的字母不保留;字母开头,都保留#trim:去除首尾的空格<body><divid="app"><h1>v-model进阶</h1><p>普通<......
  • 5.7(页面展示红星照耀中国)
    下面是我web的页面展示    ......
  • vue - 父子组件生命周期
    vue-父子组件生命周期题目Vue的父组件和子组件生命周期钩子函数执行顺序?Vue的父组件和子组件生命周期钩子函数执行顺序可以归类为以下4部分:加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子m......
  • 加密技术在保护企业数据中的应用
    加密技术是企业数据保护的核心,对于维护信息安全至关重要。透明加密技术使文件加密后不改变用户对文件的使用习惯,内部文件打开自动解密,存储自动加密,一旦离开使用环境,加密文件将无法正常读取,从而保护文件内容。华企盾DSC数据安全防泄密系统在这方面提供了强大的支持,以下是加密技术在......
  • C#应用下的CSV文件写入和读出
    1.建立DataTable类型DataTablemy_accurdt;my_accurdt=newDataTable(DateTime.Now.ToString("yMMddHHmm")+"_AccurData");2.创建DataTable的列和行//列my_accurdt.Columns.Add(newDataColumn("Oder",typeof(int)));my_accurdt.Columns.Ad......