vue适用多页面应用吗-前端问答-PHP中文网

首页

web前端

前端问答

vue适用多页面应用吗

青灯夜游

Dec 19, 2022 pm 04:04 PM

vuevue3

vue适用多页面应用。vue在工程化开发的时候依赖于webpack，而webpack是将所有的资源整合到一块后形成一个html文件一堆js文件；如果想使用vue实现多页面应用，就需要对它的依赖进行重新配置，即通过修改webpack配置来让脚手架具备构建多页应用的能力。

vue适用多页面应用吗

本教程操作环境：windows7系统、vue3版，DELL G3电脑。

我们知道vue可以快速开发web单页应用，而且官方为我们提供了自己的应用脚手架vue-cli，我们只需要下载脚手架，安装依赖后就可以启动vue应用雏形。

这得益与webpack的依赖追踪，各种资源后缀的loader，以及相关webpack插件的强大功能。

然而有些时候，我们有多页面的开发需求，在这种情况下，我们可以为多页面构建相应的多个应用，比如通过vue-cli生成多个应用目录，但是这样一方面会多出很多重复的构建代码和样板代码，另外也会破坏应用的统一性，不便于维护。我们可以在vue-cli的基础上通过修改webpack配置来让脚手架具备构建多页应用的能力。

vue在工程化开发的时候依赖于 webpack ,而webpack是将所有的资源整合到一块后形成一个html文件一堆 js文件, 如果将vue实现多页面应用,就需要对他的依赖进行重新配置,也就是修改webpack的配置文件.

下面主要详述Vue的多页面应用开发（MPA）

具体实现步骤

1.1、需要修改的配置文件

1、进入\build\webpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：

注意绿色框的修改和对应。

  entry: {
    app: './src/main.js',
    one: './src/pages/one.js',
    two: './src/pages/two.js'
  }

2、对开发环境run dev里进行修改，打开\build\webpack.dev.conf.js文件，在module.exports那里找到plugins，下面写法如下：

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app']
    }),
    new HtmlWebpackPlugin({
      filename: 'one.html',
      template: 'one.html',
      inject: true,
      chunks: ['one']
    }),
    new HtmlWebpackPlugin({
      filename: 'two.html',
      template: 'two.html',
      inject: true,
      chunks: ['two']
    }),

说明：这里的配置比较重要 ,如果没写好的在打包的时候就会报错了, 在chunks那里的app指的是webpack.base.conf.js的 entry 那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry，如果没写则引入所有页面的资源。也就是没有改项目配置前形成的单页应用。

3、之后就对run build也就是编译环境进行配置。首先打开\config\index.js文件，在build里加入这个

    index: path.resolve(__dirname, '../dist/index.html'),
    one: path.resolve(__dirname, '../dist/one.html'),
    two: path.resolve(__dirname, '../dist/two.html'),

说明：这里也就是打包之后dist文件夹中形成的 html。

4、然后打开/build/webpack.prod.conf.js文件，在plugins那里找到HTMLWebpackPlugin，添加

 new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'app']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.one,
      template: 'one.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'one']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.two,
      template: 'two.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'two']
    }),

说明：其中filename引用的是\config\index.js里的build，每个页面都要配置一个chunks，不然会加载所有页面的资源。

1.2、我的目录

2.3、需要新建的几个文件的代码

1、one.js文件代码：（我这里是举例），two.js和这个代码类似，注意将“one”替换成“two”即可。

import Vue from 'vue'
import one from './one.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: '#one',
    render: h => h(one)
})

2、one.vue文件代码：（我这里是举例），two.vue和这个代码类似，注意将“one”替换成“two”即可。

<template>
    <div id="one">
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default {
        name: 'one',
        data() {
            return {
                msg: 'I am one'
            }
        }
    }
</script>

3、one.html文件代码：（我这里是举例），two.vue和这个代码类似，注意将“one”替换成“two”即可。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>one-page</title>
</head>
<body>
    <div id="one"></div>
</body>
</html>

注意！<div id="one"></div>中id的修改，之前忘记修改，页面空白无内容，打开控制台可以看到div标签中并无内容，且id是app我才反应过来，修改后就好了。

【相关推荐：vuejs视频教程、web前端开发】

以上是vue适用多页面应用吗的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

掌握CSS选择器：高效样式的类别与IDMay 16, 2025 am 12:19 AM

使用类选择器和ID选择器取决于具体用例：1)类选择器适用于多元素、可重用样式，2)ID选择器适用于唯一元素、特定样式。类选择器更灵活，ID选择器处理速度更快但可能影响代码维护性。

HTML5规范：探索关键目标和动机May 16, 2025 am 12:19 AM

keykeygoalsandmotivationsbehindhtml5weretoenhancesemantstructure，Improvemultimediasupport，andensureBetterperformanceandCompatibalityAcroscaroscaroscaroscarossdecrossdecrossdecrossdecrossdecrossdecrossdecrossdevices，drivendybytheneedtoAddresshtml4'slimitationsand limitiTations and limittations andmeetmeetModerntructAndmmoderntructss.1）

CSS ID和类：简单指南May 16, 2025 am 12:18 AM

IDSareNiqueAndusedForsingLelement，andleclassEsareReusableFormultPirultElements.1）useIdIdSforuniqueElementsLikeAspeCificheader.2）useclassesforconsistentSistentSistentStyActStyAcroSsmultipleLementslike.3）becautiouswithspecificitificitieAsideCerrrase.4）

HTML5目标：了解规范的关键目标May 16, 2025 am 12:16 AM

html5aimstoenhancewebaccctible，互动性和效率。1）ITSupportsMultimediawithOutPlugins，Simplifyinginguserexperience.2）Semanticmarkmarksmarkupimprovissupimprovessupstructureandacccessessible.3）增强bacegencementingIncrassubility.4）

使用HTML5难以实现其目标吗？May 16, 2025 am 12:06 AM

html5isnotparticulllydifficulttousebutrequirequireSustingingItsFeatures.1）smanticelementslike like ,,，和iMproveructure，andimprovucture，可读性，seo和acctibility.2）多中性倍增量，且可读性

CSS：我可以在同一DOM中使用多个ID吗？May 14, 2025 am 12:20 AM

No,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure

HTML5的目的：创建一个更强大，更容易访问的网络May 14, 2025 am 12:18 AM

html5aimstoenhancewebcapabilities，Makeitmoredynamic，互动，可及可访问。1）ITSupportsMultimediaElementsLikeAnd，消除innewingtheneedtheneedtheneedforplugins.2）SemanticeLelelemeneLementelementsimproveaCceccessibility inmproveAccessibility andcoderabilitile andcoderability.3）emply.3）lighteppoperable popperappoperable -poseive weepivewebappll

HTML5的重要目标：增强网络开发和用户体验May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelopmentanduserexperiencethroughsemantstructure，多媒体综合和performanceimprovements.1）SemanticeLementLike like，和ImproVereAdiability and ImproVereAdabilityAncccossibility.2）和TagsallowsemplowsemplowseamemelesseamlessallowsemlessemlessemelessmultimedimeDiaiiaemediaiaembedwitWithItWitTplulurugIns.3）

See all articles