vue 如何实现多页面应用

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue 如何实现多页面应用

李大玄关注

0.9732019.06.15 18:06:38字数 610阅读 10,404

其实我孤独的像条狗

再此我先说明 我写的这个例子是一个成熟的项目中直接加入的, 里面有好多配置都是配好的 , 但是这些都不重要,因为没有太大的关系,进入正题~

我们平时开发 vue项目的时候,就有一种感觉就是 vue就像是专门为单页应用而诞生的,因为人家的官方文档中也说了

在这里插入图片描述


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

vue的开发有两种，一种是直接的在script标签里引入vue.js文件即可，这样子引入的话个人感觉做小型的多页面会比较舒坦，一旦做大型一点的项目，还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。下面详解步骤。

首先第一步:

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

// 文件路径更具自己的实际情况进行配置,我这仅是 demo
entry: {
    app: \'./src/main.js\',
    one: \'./src/js/one.js\',
    two: \'./src/js/two.js\'
  },

在这里插入图片描述

这里的 one two 一定时要先在这里定义好的,后面是要用到的,好比 里面的app 不是随便瞎写的

第二步:

对开发环境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，如果没写则引入所有页面的资源。也就是没有改项目配置前形成的单页应用

第三步:

对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

第四步:

打开/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里面的名称对应)
        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\']
    }),

在这里插入图片描述

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

上面的操作完成之后进行下面的傻瓜式操作 对咱们创建的文件进行码代码

one.js文件可以这样写：

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)
})

在这里插入图片描述

one.vue写法如下：

<template>
  <div id="one">
    {{msg}}
  </div>
</template>
<script>
export default {
  name: \'one\',
  data () {
    return {
      msg: \'I am one\'
    }
  }
}
</script>

tow 文件中的代码一样 我就不写了

主要步骤我写完了,咱们试试打包文件 输入 npm run build 打包文件

在这里插入图片描述


没有问题, 跑一下项目看看 npm run dev

在这里插入图片描述


会报一个错,就是找不到文件

少了一步,

在这里插入图片描述


就是一定要在index.html的同级目录下创建one.html 与 two.html

在这里插入图片描述


项目跑起来了 点进去看看

在这里插入图片描述


OK 完成!!!

再此附上我的QQ: 2489757828 有问题的话可以共同探讨

我的博客: 李大玄

以上是 vue 如何实现多页面应用 的全部内容， 来源链接： utcz.com/z/376991.html

回到顶部