美文网首页锤子前端前端vue学习
vue 如何实现多页面应用

vue 如何实现多页面应用

作者: 魔仙堡杠把子灬 | 来源:发表于2019-06-15 18:06 被阅读0次

    其实我孤独的像条狗

    再此我先说明 我写的这个例子是一个成熟的项目中直接加入的, 里面有好多配置都是配好的 , 但是这些都不重要,因为没有太大的关系,进入正题~
    我们平时开发 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 如何实现多页面应用

        本文链接:https://www.haomeiwen.com/subject/fcxifctx.html