vue多页面开发

为什么使用多页面开发

vue是单页面应用，对多页面的页面间的相互跳转间没有过渡效果，难以维护；当一个应用越来越大的时候单页面模式应付不来，这时候就需要使用多页面应用了。

多页和单页应用模式的对比

转载于：https://www.cnblogs.com/xiyangcai/p/8609773.html

如果使用 vue-cli3 构建多页面应用的话，看这个:https://www.cnblogs.com/zhaoxiaoying/p/10647545.html

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

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

vue多页面开发步骤

第一步：

进入 \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 文件中的代码一样 我就不写了

第五步：

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

第六步：

主要步骤写完，试试打包文件 输入 npm run build 打包文件

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

转载于：https://www.jianshu.com/p/eceb2ac9df90

参考于：https://jingyan.baidu.com/article/67662997998a9654d51b8487.html

vue多页面配置以及实现路由跳转

第一步：

在src文件夹下新建一个view文件夹，用于存放多个页面

第二步：

在view文件夹下新建一个index文件夹，把public目录下的index.html，src目录下的main.js 、App.vue 统一挪到 index 文件夹下（记得修改相对应的路径）

第三步：

再新建一个文件夹是跳转的页面，例如我的是Dingtalk文件夹。再把上面的index下的三个文件复制过来
，复制过来要把里面的内容全部清除，成为新的文件，然后再配置

第四步：

失去了默认的入口文件和页面，我们需要自己重新配置
在项目的根目录下新建vue.config.js文件，如下：

第五步：

在这个文件中，我们可以配置每个页面的入口文件，和输出路径
##### 第六步：
现在，我们就可以在项目下通过标签实现页面跳转了
注意，这里不必写成相对路径！

转载于：https://blog.csdn.net/qq_44699164/article/details/107744201