vue3多页面配置你一定会遇到的问题,踩坑指南

vue3实现多页面打包容易,关键是如何实现本地的开发和调试?我们接下来解决如下几个问题:

1 多页面项目的项目结构是怎样的?

--public

--src
   ---App.vue
   ---main.js
   ---page1. +
        ---App.vue
        ---main.js
        ----home.vue
        ----list.vue
   ---page2. +
        ---App.vue
        ---main.js
        ----home.vue
        ----list.vue
vite.config.js
package.json
page1.html. +
page2.html. +

这是我们配置的最原始的一个结构,如图,带+的是新增的文件(文件夹)特别注意新增的page1.html和page2.html,这两个模版文件是一定不能忘记的。同时要注意script中引用main.js文件路径的修改,如图

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/page2/main.js"></script>
  </body>
</html>

但是仅仅只是这样还是不够的,我们要打包成不同的项目,那需要在对vite.config.js做一些更改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    hmr:true
  },
  build:{
    rollupOptions:{
      input:{
        index:resolve(__dirname,'index.html'),
        page1:resolve(__dirname,"/page1.html"),
        page2:resolve(__dirname,"/page2.html")
      },
      output:{
        chunkFileNames:"js/[name]-[hash].js",
        assetFileNames:"[ext]/[name]-[hash].[ext]"
      }
    }
  }
})

我们需要对rollipOption选项的input和output做多入口和出口的设置。到这一步。我们 打包以后就可以正常生成对应的文件了。我们看一看结果:

 同时我们通过http://localhost:5173/page1.html就能正常访问page1,和page2了,展示的内容分别是page1项目和page2项目的app.vue的内容。但是我们的page1和page2项目可不止一个app.vue,我们要通过路由配置不同的路由访问不同的页面。接下来我们需要配置来看路由了,不过在此之前我们要先改造下我们的项目目录结构

仔细观察。我们在page1和page2这两个项目下分别新增了一个views文件夹,用来存放页面,同时新增了一个home和list页面,用来测试。然后我们再新增我们的路由文件,注意 路径和组件的引用

//src下新建router文件夹
//main.js 主入口的main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router/index". +
createApp(App).use(router).mount('#app')


--------router.js----------------

    import { createRouter, createWebHistory ,createWebHashHistory} from 'vue-router'

    const router = createRouter({
        history: import.meta.env.DEV ? createWebHashHistory() : createWebHistory(),
        routes: [
            {
                path: '/',
                name: 'home',
                component: ()=>import("../pages/home.vue")
            },
            {
                path: '/list',
                name: 'list',
                component: ()=>import("../pages/list.vue")
            },
            {   
                path: '/page1/home',
                name: 'page1Home',
                component: ()=>import("../page1/views/home.vue")
            },
            {   
                path: '/page1/list',
                name: 'page1List',
                component: ()=>import("../page1/views/list.vue")
            },
            {   
                path: '/page2/home',
                name: 'page2Home',
                component: ()=>import("../page2/views/home.vue")
            },
            {   
                path: '/page2/list',
                name: 'page2List',
                component: ()=>import("../page2/views/list.vue")
            }

          
        ]
    })

    export default router


到此为止。我们通过页面访问page1下的home,则只需要输入地址http://localhost:5173/#/page1/home这样我们就能正常访问了。如下图:

其他的多页面地址访问同理 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/68651.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HttpRunner搭建接口自动化测试项目

前言&#xff1a;前面写过一篇PytestAllure接口自动化测试框架搭建的博客&#xff0c;这篇博客学习另外一款优秀的开源的接口自动化测试框架&#xff1a;HttpRunner&#xff0c;本博客主要学习如何搭建基于HttpRunner的接口自动化测试项目 PytestAllure接口自动化测试框架搭建…

编写一个指令(v-focus2end)使输入框文本在聚焦时焦点在文本最后一个位置

项目反馈输入框内容比较多时候&#xff0c;让鼠标光标在最后一个位置&#xff0c;心想什么奇葩需求&#xff0c;后面试了一下&#xff0c;是有点影响体验&#xff0c;于是就有了下面的效果&#xff0c;我目前的项目都是若依的架子&#xff0c;用的是vue2版本。vue3的朋友想要使…

“智农”数字孪生一体化管控平台

数字乡村可视化|数字乡村|农业可视化|高标准农田|数字农业大脑|大棚可视化|数字农业|数字乡村|数字农业研学|数字大棚|智慧大棚|农业数字孪生|智慧农业|数字农业温室|智农|智慧农业可视化|智能温室|智慧温室|农业大数据|农业产业园可视化|植物工厂|可视化农业监控系统|设施农业…

判断时间段是否重叠

1、逻辑公式 时间段1&#xff1a;start1&#xff08;开始时间&#xff09;&#xff0c;end1&#xff08;结束时间&#xff09; 时间段2&#xff1a;start2&#xff08;开始时间&#xff09;&#xff0c;end2&#xff08;结束时间&#xff09; 重叠条件为&#xff1a;start1 <…

I 2C 接口控制器理论讲解

IIC系列文章&#xff1a; (1) I 2C 接口控制器理论讲解 (2) I2C接口控制设计与实现 文章目录 一、 IIC协议二、IIC协议解析1.特点2.规定3.器件地址4.存储地址 三、IIC写时序1.单字节写时序2.连续写时序&#xff08;页写时序&#xff09; 四、IIC读时序1.单字节读时序2.连续读时…

鸿蒙边缘计算网关正式开售

IDO-IPC3528鸿蒙边缘计算网关基于RK3568研发设计&#xff0c;采用22nm先进工艺制程&#xff0c;四核A55 CPU&#xff0c;主频高达2.0GHz&#xff0c;支持高达8GB高速LPDDR4&#xff0c;1T算力NPU&#xff0c;4K H.265/H264硬解码&#xff1b;视频输出接口HDMI2.0&#xff0c;双…

62.不同路径

一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#xff1f; 动态规…

竞赛项目 深度学习手势识别算法实现 - opencv python

文章目录 1 前言2 项目背景3 任务描述4 环境搭配5 项目实现5.1 准备数据5.2 构建网络5.3 开始训练5.4 模型评估 6 识别效果7 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习手势识别算法实现 - opencv python 该项目较为新颖…

.netcore grpc客户端流方法详解

一、客户端流式处理概述 客户端流式处理方法在该方法没有接收消息的情况下启动。 requestStream 参数用于从客户端读取消息。 返回响应消息时&#xff0c;客户端流式处理调用完成。客户端可以发送多个消息流到服务端&#xff0c;当所有客户端消息流发送结束&#xff0c;调用请…

APP备案明明是好事,为啥有些人反对呢?

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; APP和小程序备案&#xff0c; 这事在网上闹的沸沸扬扬&#xff0c;明明是好事&#xff0c;可为啥那么多人反对呢?而且最近出现了好多阴阳怪气的声音。 话说从2005年3月起&#xff0c;国内所有的网…

AI抢饭碗!多部由Midjourney+Runway,制作的电影火了!丨IDCF

ChatGPT等生成式AI正在重塑各个行业的工作模式&#xff0c;尤其是影视领域。最近&#xff0c;多部由MidjourneyRunway生成式AI制作的电影预告片在社交平台上火了。 一部名叫的《芭本海默》的电影从对白、场景、人物、切镜完全由生成式AI制作完成并受到了用户的好评。该片结合了…

IDEA简单拷贝一份新项目记录

IDEA简单拷贝项目记录 拷贝后改项目名&#xff0c;然后iml 配置文件改项目名&#xff0c;然后 .idea 中的compiler.xml 里面的name标签改项目名。 就可以了

3D Web轻量化引擎HOOPS Communicator如何实现对BIM桌面端的支持?

HOOPS Communicator是一款简单而强大的工业级高性能3D Web轻量化渲染开发包&#xff0c;其主要应用于Web领域&#xff0c;主要加载其专有的SCS、SC、SCZ格式文件&#xff1b;HOOPS还拥有另一个桌面端开发包HOOPS Visualize&#xff0c;主要加载HSF、HMF轻量化格式文件。两者虽然…

PyTorch深度学习实战(10)——过拟合及其解决方法

PyTorch深度学习实战&#xff08;10&#xff09;——过拟合及其解决方法 0. 前言1. 过拟合基本概念2. 添加 Dropout 解决过拟合3. 使用正则化解决过拟合3.1 L1 正则化3.2 L2 正则化 4. 学习率衰减小结系列链接 0. 前言 过拟合 (Overfitting) 是指在机器学习中&#xff0c;模型…

putty使用记录

在官网下载并安装putty 一、SSH 二、FTP open 192.168.1.118 put -r C:\Users\Administrator\Desktop\test /opt/lanren312/test # 上传&#xff08;文件夹&#xff09; get -r /opt/lanren312/test C:\Users\Administrator\Desktop\test2 # 下载&#xff08;文件夹&#xff…

边缘计算框架 Baetyl v2.4.3 正式发布

导读Baetyl v2.4.3 版本已经发布&#xff0c;对 v2.3.0 版本的部分功能进行了升级优化。公告称&#xff0c;这些新功能继续遵循云原生理念&#xff0c;构建了一个开放、安全、可扩展、可控制的智能边缘计算平台。 Baetyl 项目由百度发起&#xff0c;基于百度天工 AIoT 智能边缘…

【问题解决】Git命令行常见error及其解决方法

以下是我一段时间没有使用xshell&#xff0c;然后用git命令行遇到的一些系列错误和他们的解决方法 遇到了这个报错&#xff1a; fatal: Not a git repository (or any of the parent directories): .git 我查阅一些博客和资料&#xff0c;可以解决的方式&#xff1a; git in…

jQuery基础

目录 基础语法 选择器 层次选择器 属性选择器 基本过滤选择器 可见性过滤选择器 官网下载地址 两种包区别&#xff1a; $(document).ready()与window.onload类似&#xff0c;但也有区别。 基础语法 $(selector).action() 选择器 同html选择器等。 基本选择器包括标签选择器…

竞赛项目 深度学习的智能中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…

后端人员如何快速上手vue

一、环境搭建 了解更多vue-cli 官网地址:https://cli.vuejs.org/zh/guide/browser-compatibility.html 前提 1.安装node(js代码的运行环境)、npm、cnpm/yarn&#xff1b; nodejs官网&#xff1a;https://nodejs.org/en cnpm安装&#xff1a;https://www.python100.com/htm…