Vue-CLI多页分目录打包的步骤记录

下面就来详细讲解一下“Vue-CLI多页分目录打包的步骤记录”的完整攻略。

Vue-CLI多页分目录打包的背景

在Vue的开发中，通常会使用到Vue-CLI脚手架工具来快速创建一个Vue项目，但默认情况下Vue-CLI创建的是单页应用，而有些场景需要创建多页应用。多页应用指的是一个网站包含多个入口页面，并且每个入口页面处理不同的业务逻辑，这种情况下需要使用多个HTML文件来搭建网站页面。

在进行多页分目录打包时，需要对Vue-CLI的默认配置进行修改，下面就讲具体的步骤。

Vue-CLI多页分目录打包的步骤记录

第一步：创建多个html文件

在项目的src目录下，创建多个HTML文件，例如：

src/
 |-- pages/
     |-- page1/
         |-- index.html
     |-- page2/
         |-- index.html

其中，page1和page2是两个入口页面的文件夹，里面分别包含一个index.html文件，index.html文件中的内容根据业务需求进行编写。

第二步：修改webpack配置

在Vue-CLI项目中，webpack是用来进行打包的工具。需要修改webpack的配置文件以支持多页应用的打包。我们可以在项目的根目录下创建一个vue.config.js文件，并按照以下方式修改webpack的配置：

const path = require('path');

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  pages: {
    page1: {
      entry: 'src/pages/page1/main.js',
      template: 'src/pages/page1/index.html',
      filename: 'page1.html'
    },
    page2: {
      entry: 'src/pages/page2/main.js',
      template: 'src/pages/page2/index.html',
      filename: 'page2.html'
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

上面的代码中，我们定义了两个页面，分别是page1和page2，它们的入口文件分别位于src/pages/page1/main.js和src/pages/page2/main.js，HTML模板文件分别位于src/pages/page1/index.html和src/pages/page2/index.html，最后生成的HTML文件分别被命名为page1.html和page2.html。

在configureWebpack中加入resolve，这是为了做alias的别名配置，用来解决多层级目录引入时的路径问题，这里我们直接设置根目录为src。也可以在webpack.base.config.js下进行配置。

第三步：配置路由

由于我们现在是多页应用，每个页面可能都需要单独配置路由，可以在入口文件中进行配置，例如page1的主入口文件main.js代码如下：

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

Vue.config.productionTip = false

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

第四步：编译打包

执行以下命令进行编译打包：

npm run build

打包完成后，我们会在dist目录下看到多个HTML文件和多个JS文件，这就是我们的多页应用。

示例

示例一：使用vue-router实现多页面应用

在上面的步骤中，我们虽然对每个页面进行了路由的配置，但实际上路由并没有生效。接下来我们来演示如何使用Vue-Router来实现多页应用的路由。

第一步：安装Vue-Router

在终端里通过npm进行安装：

npm install vue-router --save

第二步：应用Vue-Router

在src/pages/page1/main.js文件中应用Vue-Router，代码如下：

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

Vue.config.productionTip = false

new Vue({
  router, // 将路由实例注入到vue实例中
  render: h => h(App),
}).$mount('#app')

然后，我们在src/pages/page1目录下，新建一个router.js文件，用来做路由的配置，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

上面的代码中，我们定义了两个路由：

/ 对应的是Home组件
/about 对应的是About组件

然后我们可以在src/pages/page1/App.vue中使用<router-view />来渲染路由组件。

在src/pages/page2目录下做相同的修改，具体不再赘述。

第三步：编译打包

按照上面的步骤进行配置完Vue-Router后，在终端中运行：

npm run build

编译打包完成，会在dist目录下看到两个HTML文件和两个JS文件。

示例二：使用Element-UI实现多页面应用

第一步：安装和引入Element-UI

在src/main.js中引入Element-UI和样式文件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router';

Vue.use(ElementUI);

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

在src/pages/page1/main.js和src/pages/page2/main.js中做相同的引入和使用操作。

第二步：修改webpack配置

在项目根目录下的vue.config.js文件中加入别名配置：

const path = require('path');

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  pages: {
    page1: {
      entry: 'src/pages/page1/main.js',
      template: 'src/pages/page1/index.html',
      filename: 'page1.html'
    },
    page2: {
      entry: 'src/pages/page2/main.js',
      template: 'src/pages/page2/index.html',
      filename: 'page2.html'
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
  },
};

在上面的代码中，resolve函数是为了获取绝对路径，@ 表示src的绝对路径，后续实现引入时就可以使用别名了。