vue多页面应用

vue多页面应用

  配置vue多页面，生成的vue项目默认是单页面

  单页面和多页面的优缺点：

  多页面应用： 一个网址对应一个页面资源
  1) 缺点：跳转一个页面都需要重新加载整个页面的资源，页面跳转会刷新！
  2) 优点：seo优化好

  单页面应用：整个网站都只有一个页面，里面通过相关手段展示不同的内容

  1) 优点：页面的跳转是使用js 实现判断路径的变化，去展示不同的组件内容。 页面自始至终都不会重新加载资源！
  2) 优点：维护容易； 复用性强；组件缓存； 体验感好；快发速度快；
  3) 缺点：首次访问网页加载慢(因为要加载整个应用资源，相对多页面而言，首次访问多页面应用的某个页面只会加载该页面的资源)，而且如果业务模块越来越多了，会导致首次访问单页面应用加载打包后的资源比之前变的越来越大，加载会变得越来越慢的问题
  4)缺点：不利于seo优化！

多页面是指一个应用中有多个页面，页面跳转时是整页刷新

一.vue-cli3多页面

1.在src文件夹下新建两个页面文件夹

2.每个页面文件夹下都有基本的一个.html后缀的文件（页面模板文件），.js文件（主入口）和.vue（根组件）

  public下面的index.html模板文件已经没有作用了，可以删除

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

  这边使用一个npm的包glob，不知道是不是帮你下载了还是node内置的对象，我是没有安装直接使用。关于glob的匹配规则和方法可以自行百度

const glob = require('glob')
function creatEntry () {
  const entryObj = {}
  glob.sync('./src/**/index.html').forEach(val => {
    // console.log(val, 'val----')
    // ./src/article/index.html val----
    // ./src/index/index.html val----
    const url = val.split('/')[2]
    entryObj[url] = {
      entry: `src/${url}/main.js`,
      template: `src/${url}/index.html`,
      filename: `${url}.html`
    }
  })
  return entryObj
}

module.exports = {
  pages: creatEntry()
}

二.vue-cli2多页面

1.在src文件夹下新建pages目录，并新建两个页面article,index

2.每个页面文件夹下都有基本的一个.html后缀的文件（页面模板文件），.js文件（主入口）和.vue（根组件）

3.因为失去了默认的入口文件和页面，我们需要自己重新配置

  1) 修改webpack.base.conf.js 配置文件入口文件，改为两个入口

  entry: {
    article: './src/pages/article/main.js',
    index: './src/pages/index/main.js'
  }

  2) 修改webpack.dev.conf.js配置文件模板文件配置

     new HtmlWebpackPlugin(
     {
        filename: 'article.html',
        template: './src/pages/article/index.html',
        inject: true,
        chunks:['article']
      }
    ),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/pages/index/index.html',
      inject: true,
      chunks:['index']
    })

  3) 修改webpack.prod.conf.js配置文件模板文件配置
  先要修改config/index.js里面的build对象配置的index变量，因为webpack.prod.conf.js配置文件会用到，修改为如下：

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

  webpack.prod.conf.js里的HtmlWebpackPlugin配置改为如下：

    new HtmlWebpackPlugin({
      filename: config.build.article,
      template: './src/pages/article/index.html',
      inject: true,
      chunks: ['manifest','vendor','article']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: './src/pages/index/index.html',
      inject: true,
      chunks: ['manifest','vendor','index']
    })

  ‘manifest’,'vendor’作用：因为公共文件必须在自己引用的js文件之前引用。

4.注意点

  1) 一般来说多页面，里面的其中一个页面，要输出index.html，因为应用默认打开index.html
  2) 路由时跟着多页面里面的某个页面的，如果这个页面还没有被加载到，一开始就进行路由跳转，报404。
  3) vue-cli2，a链接跳转其它页面，不能省略页面的.html，带上才能跳转成功

    <a
          href="/article.html"
          target="_blank"
        >
          article-html
        </a>

  4) 路由跳转了，但是页面没有变，很有可能，是在某个页面的根页面里面，没有加<router-view/>