vue多页面

pages #

• Type: Object

• Default: undefined

  在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：

  • 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
  • 或一个指定其 entry 的字符串。

pages #

• Type: Object

• Default: undefined

  在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：

  • 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
  • 或一个指定其 entry 的字符串。

pages #

• Type: Object

• Default: undefined

  在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：

  • 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
  • 或一个指定其 entry 的字符串。

 

pages #

• Type: Object

• Default: undefined

  在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：

  • 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
  • 或一个指定其 entry 的字符串。

pages #

• Type: Object

• Default: undefined

  在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：

  • 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
  • 或一个指定其 entry 的字符串。

 

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。

---

 

https://cli.vuejs.org/zh/config/#pages 

vue.config.js:

const { defineConfig } = require('@vue/cli-service')
const vConsolePlugin = require('vconsole-webpack-plugin')

module.exports = defineConfig({
  lintOnSave: false,
  transpileDependencies: true,
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
    },
    order: {
      entry: 'src/weiban/order.js',
      template: 'public/weiban/order.html',
      filename: 'weiban/order.html',
    },
  },
  configureWebpack: (config) => {
    console.log('old webpackConfig', config)
    config.output.chunkFilename = 'js/[name]-legacy-[hash].js'
    if (process.env.VUE_APP_NODE_ENV === 'dev') {
      config.devtool = 'eval-source-map'
    } else {
      config.devtool = 'cheap-module-source-map'
      //config.mode = 'production'
    }

    let envType = process.env.VUE_APP_NODE_ENV != 'production'
    let pluginsDev = [
      new vConsolePlugin({
        filter: [],
        enable: envType,
      }),
    ]

    config.plugins = [...config.plugins, ...pluginsDev]

    console.log('new webpackConfig', config)
  },
})

 访问链接：

http://localhost:8080/weiban/order.html

打包：