从零搭建vue项目 单页应用的基本配置

前几篇文章我们介绍了 Vue 项目构建及运行的前期工作，包括 webpack 的配置、环境变量的使用等，在了解并掌握了这些前期准备工作后，那么接下来我们可以走进 Vue 项目的内部，一探其内部配置的基本构成。

image.png

配置

1. 路由配置
由于 Vue 这类型的框架都是以一个或多个单页构成，在单页内部跳转并不会重新渲染 HTML 文件，其路由可以由前端进行控制，因此我们需要在项目内部编写相应的路由文件，Vue 会解析这些文件中的配置并进行对应的跳转渲染。

我们来看一下 CLI 给我们生成的 router.js 文件的配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

这份配置可以算是最基础的路由配置，有以下几点需要进行优化：

• 如果路由存在二级目录，需要添加base属性，否则默认为 "/"
• 默认路由模式是 hash 模式，会携带#标记，与真实 url 不符，可以改为 history模式
• 页面组件如果没有进行按需加载，可以使用 以下介绍的几种方式来进行优化

路由组件的按需加载的几种方式：
vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()

https://www.cnblogs.com/yzq-fighting/p/7731545.html

在Vue项目中，一般使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如：

image.jpeg

这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载

1.webpack提供的require.ensure(),这样可以实现按需加载，并且你可以将多个相同类的组件打包成一个文件，只要给他们指定相同的chunkName即可，如示例中的demo将会打包成一个文件。

image.jpeg

在webpack 2的官网上写了这么一句话：

require.ensure（）特定于的的的WebPack并由进口（）取代。
所以，在webpack 2里面应该是不建议使用require.ensure（）这个方法的。但是目前该方法仍然有效，所以可以简单介绍一下。包括在webpack 1中也是可以使用。

下面是require.ensure（）的语法：
require.ensure（dependencies：String []，callback：function（require），errorCallback：function（error），chunkName：String）

require.ensure（）接受三个参数：

• 第一个参数的依赖关系是一个数组，代表了当前需要进来的模块的一些依赖。

• 第二个参数回调就是一个回调函数其中需要注意的是，这个回调函数有一个参数要求，通过这个要求就可以在回调函数内动态引入其他模块值得注意的是，虽然这个要求是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则的的的的WebPack就无法静态分析的时候处理它。

• 第三个参数errorCallback比较好理解，就是处理错误的回调。

• 第四个参数chunkName则是指定打包的组块名称。

r 是指 resolve，这个特性依赖于 Promise；require.ensure() 是 webpack 特有的，新版里已经被 import() 取代；这里使用了 require.ensure 函数：require.ensure(dependencies: String[], callback: function(require), chunkName: String) 。

下面是我们优化结束的代码：

const router = new VueRouter({
  mode: "history",
  base: process.env.VUE_APP_BASE_URL,
  routes
});

改为 history 后我们 url 的路径就变成了 http://127.0.0.1:8080/vue/about，而不是原来的 http://127.0.0.1:8080/vue/#/about，但是需要注意页面渲染 404 的问题，具体可查阅：HTML5 History 模式。

Vue Router 官方文档还推荐使用动态 import 语法来进行代码分块：

// 引入 Home 组件
const Home = () => import('./views/Home.vue');
 
// 引入 About 组件
const About = () => import('./views/About.vue');

如果你想给拆分出的文件命名，可以尝试一下 webpack 提供的 Magic Comments（魔法注释）：

const Home = () => import(/* webpackChunkName:'home'*/ './views/Home.vue');

总结：推荐动态import，需要 webpack 版本 > 2.4，新版的 webpack 才支持。如果项目使用的是旧版的webpack，就不能使用动态import技术，可以使用 require.ensure 等。这几种方式都能实现按需加载，使用哪种方式，依据具体场景来确定。

2. Vuex配置

3. 接口配置

未完待续