Vue-cli3多页面配置

时间 2020-03-23

标签 vue cli3 cli 页面配置繁體版

原文原文链接

Vue-cli3发布已经好长时间了，笔者也在一直使用，因为公司业务须要要使用多页面配置，因而花时间研究了一下Vue-cli3如何配置多页面。因为Vue-cli3相比以前的版本作了很大的改动，在研究过程当中也遇到一些问题。javascript

对于Vue-cli3建立项目这里就不作太多的赘述了，毕竟不属于本文内容，有关相关博客也有不少，你们能够自行Google一下就行了。css

多页面应用(mpa)与单页面应用(spa)优缺点

在项目中咱们用到的大多数都是单页面应用(spa)，对于多页面可能用到的比较少一些，具体仍是要根据具体的业务状况，去以为本身的技术选型。具体应该如何应用能够酌情考虑。html

单页面应用(spa)

单页面：单页面，简单的理解就是一种结构布局很简单的静态页面。 ——节选自百度百科前端

通俗的的来说单页面就是只有一个html页面，全部跳转方式都是经过组件切换完成的。正如咱们平时所用的Vue同样，可是Vue一样借助了Vue-Router完成了对页面(组件)的切换来实现页面之间的跳转(即组件间的切换)。vue

单页面的到来给前端带来很大的好处，因为资源只须要加载因此页面之间跳转流畅，实现了组件化的的开发，组件的重复利用，大大增长了开发的速度以及下降了项目的维护成本。java

单页面应用既然有诸多的好处，固然一样也会带来不少的一些弊端，因为单页面应用在初次访问时须要加载所有的资源因此，首屏的加载速度会变得有一些慢。webpack

多页面应用(mpa)

多页面：整个项目有多个html，全部跳转方式都是页面之间相互跳转的。web

多页面与与传统的开发相似，除当前页面的路由之外都是使用a标签进行跳转的。当前路由仍然是使用Vue-Router进行跳转。npm

多页面应用因为只会加载当前访问页面所须要的资源，因此首屏加载速度很快，只加载本页所使用的css、js，并且多页面应用相比单页面应用SEO要比单页面应用要好不少的。浏览器

多页面因为只会获取当前页面所须要的资源，那么这样在进行页面之间跳转的时候致使会从新获取和加载资源，致使页面之间的跳转回变慢一些。

项目搭建

首先使用Vue-cli3脚手架建立一个Vue项目，建立完项目以后在根目录中建立vue.config.js，用来增长Vue的webpack配置项。

let glob = require('glob');
//配置pages多页面获取当前文件夹下的html和js
function getEntry(globPath) {
    let entries = {}, tmp, htmls = {};
    // 读取src/pages/**/底下全部的html文件
    glob.sync(globPath+'html').forEach(function(entry) {
        tmp = entry.split('/').splice(-3);
        htmls[tmp[1]] = entry
    })
    // 读取src/pages/**/底下全部的js文件
    glob.sync(globPath+'ts').forEach(function(entry) {
        tmp = entry.split('/').splice(-3);
        entries[tmp[1]] = {
            entry,
            //  当前目录没有有html则以共用的public/index.html做为模板
            template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html', 
            //  以文件夹名称.html做为访问地址
            filename:tmp[1] + '.html'   
        };
    });
    return entries;
};
let htmls = getEntry('./src/views/**/*.');
module.exports = {
    pages:htmls,
    publicPath: './',           //  解决打包以后静态文件路径404的问题
    outputDir: 'output',        //  打包后的文件夹名称，默认dist
    devServer: {
        open: true,             //  npm run serve 自动打开浏览器
        index: '/index.html'    //  默认启动页面
    },
    productionSourceMap: false
};

建立好vue.config.js以后，删除App.vue和main.ts(main.js)文件，并在views文件夹下建立两个新的文件夹index和about，可使用其余名称。这里的文件夹用来分散多个页面内容。

在index文件夹下面建立index.html、index.vue、main.ts，about文件也是如此。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

index.vue

<template>
    <div id="app">
        <a href="about.html">About</a>
        <h1>Index</h1>
    </div>
</template>

<script>
export default {
    name: 'page2'
}
</script>

<style>
</style>

main.ts

import Vue from 'vue'
import App from './index.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

仔细看代码代码貌似与以前的单页面应用并无任何区别，可是有一点须要注意的是，一旦须要跳转到另外一个页面的时候，须要使用a标签进行跳转<a href="about.html">About</a>。

爬坑内容

若想在多页面中使用Vue-Router也是能够的，只须要在对应的页面中添加Router的实例就能够了，须要注意的是必定要当前页面Router的实例只包含当前页面的路由。
在使用store的时候须要注意的是因为当前store只与当前页面的实例中，当发生页面跳转以后，则store数据没法进行共享，可是在当前页面中使用Router跳转的路由，仍然是能够共享store的数据的。

总结

其实不管多页面仍是单页面其实都是一种开发形式，咱们只须要针对不一样的需求和项目的复杂程度采起对应的措施，即技术选型，不管是使用哪一种都有其利弊，没有必要一味的使用某一种模式，然而这样可能限制了咱们的开发思惟。