vue3-ts-vite:vue 项目 配置 多页面应用

这篇具有很好参考价值的文章主要介绍了vue3-ts-vite:vue 项目 配置 多页面应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、Vue项目,什么是多页面应用

Vue是一种单页面应用程序(SPA)框架,这意味着Vue应用程序通常只有一个HTML页面,而在该页面上进行动态的内容更改,而不是每次都加载新的HTML页面。 

但是,有时候我们需要在同一应用程序中拥有多个独立的页面,每个页面都可以单独处理路由和逻辑。这就是多页面应用(MPA)的概念。在Vue中,实现多页面应用程序的方法是使用Vue的多入口特性,即通过配置多个入口文件来实现。

每个入口文件都有自己的路由配置、组件和其他相关资源。这些入口文件可以在构建时生成多个独立的HTML文件,每个HTML文件都有对应的JavaScript和CSS文件。这些文件可以独立部署和运行,使得应用程序能够更灵活地扩展和维护。

二、什么场景适合开发多页面应用程序

2.1、企业级应用程序:对于大型企业级应用程序,可能需要许多独立的功能模块,每个模块都有自己的独立需求和逻辑。使用多页面应用程序可以更好地组织和管理这些模块,使得每个模块的代码更加清晰和易于维护。

2.2、多语言站点:在多语言站点中,每个页面都需要独立处理语言切换和文本翻译。使用多页面应用程序可以更好地管理这些独立的页面,并且可以针对不同的语言生成不同的页面。

2.3、营销活动页面:在营销活动页面中,通常需要快速开发和部署大量的独立页面。使用多页面应用程序可以更好地组织和管理这些页面,使得开发人员可以更快速地开发和部署页面,而不用担心影响其他页面的问题。

2.4、大规模、独立和独立需求的应用程序,那么多页面应用程序是非常适合的选择。

三、创建vue-ts-vite项目

vue3:vue3+vite+ts+pinia_vue3+ts+vite+pinia_snow@li的博客-CSDN博客

四、代码实现 / vue3 ts vite 项目 配置多页面应用

4.1、本文目标实现配置三个(入口)页面的vue-ts-vite多页面应用

index.html
about.html
contact.html

4.2、vite.config.ts文件添加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      // 配置多页面
      input: {
        index: './index.html',
        about: './about.html',
        contact: './contact.html',
      },
    },
  },
})

以上配置中,input对象用于指定多个入口文件,每个入口文件都应该对应于项目根目录下的一个HTML文件。

4.3、依据main.ts创建入口文件

创建 src/main-index.ts(main.ts重命名为main-index.ts)

创建  src/main-about.ts

创建  src/main-contact.ts

文件内容来自初始项目main.ts,均为如下内容:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

4.4、在每个HTML文件中,需要使用script标签引入每个页面的入口文件

4.4.1、index.html更新页面入口文件为main-index.ts,完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Index Page</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main-index.ts"></script>
</body>
</html>

4.4.2、同理,about.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Page</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main-about.ts"></script>
</body>
</html>

4.4.3、同理,contact.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact Page</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main-contact.ts"></script>
</body>
</html>

4.5、运行项目

pnpm run dev

vue3-ts-vite:vue 项目 配置 多页面应用,前端,vue.js,javascript,前端

4.6、分别访问三个页面

4.6.1、访问index页面

vue3-ts-vite:vue 项目 配置 多页面应用,前端,vue.js,javascript,前端

4.6.2、访问about页面

vue3-ts-vite:vue 项目 配置 多页面应用,前端,vue.js,javascript,前端

4.6.3、访问contact页面

vue3-ts-vite:vue 项目 配置 多页面应用,前端,vue.js,javascript,前端

4.7、构建项目

pnpm run build

vue3-ts-vite:vue 项目 配置 多页面应用,前端,vue.js,javascript,前端

4.8、部署

构建完成后,每个页面的文件都会被打包到dist目录下,然后可以将这些文件部署到Web服务器上。

五、欢迎交流指正

六、相关连接

构建生产版本 | Vite 官方中文文档

入口起点(entry points) | webpack 中文文档文章来源地址https://www.toymoban.com/news/detail-632136.html

到了这里,关于vue3-ts-vite:vue 项目 配置 多页面应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 配置Vite获取内网IP(Vue3项目​ts版本获取本机局域网IP地址)

    参考文章:vue项目获取本机局域网IP地址(vue.config.js版本) 在Vite中,没有vue.config.js文件,而是使用vite.config.js(或vite.config.ts,如果项目使用TypeScript)来配置项目; 1.获取 IP 需要借助  os  模块,需要先安装依赖: 2.其次在vite.config.ts中引用模块  3.接着,添加一个获取本机内

    2024年02月05日
    浏览(42)
  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)

    在项目开发中,我们经常会使用一些工具函数,也经常会用到例如 loadsh 等工具库,但是这些工具库的体积往往比较大,如果项目本身已经引入了这些工具库,那么我们就没有必要再引入一次,所以我们需要自己封装一些工具函数,来简化我们的开发。 在 src/utils 目录下创建

    2024年02月20日
    浏览(57)
  • vite vue3项目打包,跳过ts检查

    遇到这个问题是因为vue文件中script标签没有写lang造成的  剩下的ts类型检查错误  \\\"build\\\": \\\"vue-tsc --noEmit --skipLibCheck vite build\\\",是因为这个vue-tsc打包对ts进行了类型检查,需要全部解决了才行,可以关闭,直接改成\\\"build\\\": \\\"vite build\\\",

    2024年02月16日
    浏览(54)
  • vue3+vite+ts+elementplus创建项目

    # vue3+vite+ts+pinia 学习笔记 ## 1、创建项目: npm init vite@latest     选择: vue、ts ## 2、进入项目目录后:npm install 安装 ## 3、运行项目: npm run dev ## 4、安装常用插件:     1、安装 npm install vue-router@latest 配置:在src目录下新建router目录,创建index.ts文件代码如下:       ```javascript 创建

    2024年02月09日
    浏览(60)
  • vue3+ts+vite项目引入echarts,vue3项目echarts组件封装

    技术栈 :Vue3 + Ts + Vite + Echarts 简介 : 图文详解,教你如何在 Vue3 项目中 引入Echarts , 封装Echarts组件 ,并实现常用Echarts图例 1.1 静态效果 1.2 动态效果 2.1 安装 Echarts npm: pnpm: 2.2 main.ts 中引入 2.3 Echarts 组件封装 /src/components/ReEcharts/index.vue 文件中写入如下代码 3.1 柱状图 实现

    2024年02月09日
    浏览(60)
  • Electron + Vue3 + Vite + TS 构建桌面应用

    之前是使用React、Electron、TS和webpack来构建桌面应用的。虽然功能齐全,但是打包等等开发的体验不太理想,总感觉太慢了。作为一个开发者,我们总是希望,执行构建命令后,可以快速打包或者启动本地应用,且通过更少的配置,来完成开发体验。 现在的vite已经得到广泛的

    2024年02月14日
    浏览(60)
  • 基于Vue3+TS+Vite+Cesium创建项目

    随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS如今真的越来越火了,对于做GIS前端开发的人员来说,Cesium开发是绝对绕不开的一门技术,所以今天来说说如何利用当下最火的 Vue3+TS+Vite 来搭建一个基于Cesium的项目开发环境。 1.使用 yarn create vite 创建

    2024年02月05日
    浏览(70)
  • 【Vue3+Ts+Vite】配置滚动条样式

    2024年02月15日
    浏览(44)
  • Vue3通透教程【十七】Vite构建TS版本Vue项目

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2024年02月13日
    浏览(53)
  • 现有的vue3+ts+vite项目集成electron

    Electron是使用JavaScript,HTML和CSS构建跨平台的桌面应用程序框架。 Electron兼容Mac、Windows和Linux,可以构建出三个平台的应用程序。 安装依赖 原来有一个vue3+ts+vite+pnpm的项目,其中sub-modules是子项目,web是主入口项目,项目结构如下: 需要将其转换成Electron项目,只需要在原来

    2024年02月12日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包