vue多页面开发和打包正确处理方法

Vue多页面开发是一种将多个页面（页面可以是独立的，也可以包含在某个父页面中）集成在一个Web应用程序中的技术。在Vue多页面开发中，每个页面都是相互独立的Vue实例。这些页面可以包含一些共享的Vue组件，但是它们被视为独立的实例，它们没有共享状态，这使得多页面开发更易于维护和理解。在本文中，我们将介绍Vue多页面开发和打包正确处理方法的完整攻略。

第一步：创建vue.config.js文件

在Vue多页面开发中，我们需要为每个页面创建一个单独的入口文件，然后将其打包到一个独立的js文件中。为此，我们需要在vue的配置文件中进行一些设置。首先，我们需要创建一个vue.config.js文件。

const path = require('path')
const { MultiPageConfig } = require('@wable/vue-multi-page')

module.exports = {
  configureWebpack: {
    entry: path.join(__dirname, 'src/main.js'),
    plugins: [
      new MultiPageConfig({
        pagesDir: path.join(__dirname, 'src/pages'),
        publicPath: '/',
        templatePath: path.join(__dirname, 'public/index.html')
      })
    ]
  }
}

在上面的代码片段中，我们引入了 @wable/vue-multi-page，它是一个简单的Vue多页面插件，提供了自动创建页面入口的功能。这个插件可以在 plugins 中进行配置。

页面目录应该是在src/pages中，我们设置为这个目录下的文件将会被自动扫描，创建一个单独的HTML和JS文件，并将其打包部署。通用的index文件可以在templatePath中设置，接着的打包路径可以在publicPath中进行设置。

第二步：为每个页面创建Vue实例

处理完了入口文件的设置，我们现在可以为每个所需的页面创建一个Vue实例。下面的示例代码演示了如何为一个名为 home 的页面创建一个Vue实例：

// src/pages/home/index.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

在上述代码中，我们在 src/pages/home/index.js 中导入vue的包，同时引入了App.vue组件，然后通过创建一个新的Vue实例将其挂载到页面上。

同样的，在每个页面中都要创建一个Vue实例，并将其挂载到指定的HTML元素上，如果页面需要引用组件或其它库，都必须进行相应的导入和引用。

到目前为止，我们已经完成了Vue多页面开发配置和页面创建的所有步骤。现在我们可以运行webpack来构建我们的Vue多页面应用程序，然后将其部署到生产环境。

注：此处无法展示完整的配置，最完整的配置可参考脚手架(by WABLE Technologies)

示例一：路由示例

路由的异常处理：超出线上目录的请求统一跳转到404页面。(Webpack的dev环境和url-loader都没有处理超出线上目录的请求，但线上会有问题)

module.exports = {
  configureWebpack: {
    plugins: [
      new MultiPageConfig({
        pagesDir: path.join(__dirname, 'src/pages'),
        publicPath: '/',
        templatePath: path.join(__dirname, 'public/index.html')
      })
    ],
    devServer: {
      historyApiFallback: {
        // 重定向
        rewrites: [
          { from: /^\/login$/, to: '/login.html' },
          { from: /^\/$/, to: '/index.html' },
          { from: /./, to: '/404.html' }
        ]
      }
    }
  }
}

在上述示例代码中，我们配置了仅在开发环境下的路由，例如，我们将所有请求都重定向到相应的html页面。

在这些html页面中，我们可以通过使用Vue Router插件来实现动态路由的功能，例如，我们可以在创建Vue实例之后，将路由实例添加到Vue实例中，并在Vue实例中设置组件和路由。

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

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    // ...
  ]
})

在上述代码片段中，我们在Vue Router实例中定义了一些路由，同时引入了Home组件。这些路由将被添加到Vue实例中。

示例二：API url配置示例

有一个后端API，线上地址与开发环境地址不同。每个页面都需要使用API，因此我们需要在Vue config中配置url地址。

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://api-prod.com' : 'https://api-dev.com'

module.exports = {
  configureWebpack: {
    plugins: [
      new MultiPageConfig({
        pagesDir: path.join(__dirname, 'src/pages'),
        publicPath: '/',
        templatePath: path.join(__dirname, 'public/index.html')
      })
    ]
  },
  chainWebpack: config => {
    // 添加全局API地址
    config.plugin('define').tap(args => {
      args[0]['process.env'].API_URL = JSON.stringify(apiUrl)
      return args
    })
  }
}

在上述示例代码中，我们首先检查当前的Vue环境是否是生产环境，然后根据不同的环境配置API地址。接着，我们在 chainWebpack 中设置API地址，process.env.API_URL 值将作为全局变量在应用程序中使用。

结论

声明：本文所提供的示例仅仅展示了多页面中可能遇到的两个问题，这并不是全部的情况，如果您想更好的了解多页面开发，请参考更多的资料。

在本篇文章中，我们介绍了Vue多页面开发的完整攻略，根据第一步和第二步的配置小结，我们可以在Vue多页面应用程序中轻松实现多个独立的Vue实例，并成功打包和部署我们的应用程序。同时，我们也演示了如何使用Vue Router和其他公共库解决在多页面应用程序中的一些实际问题。 最后，我们希望本文对您在Vue多页面开发中有所帮助。