vue多頁面項目配置

一直以來更多的是進行單頁面開發。但在與其他同行的交流中，發現多頁面項目也是業務的一種需求，趁着今天有時間，今天搞了一下。

多頁面的配置，自然也可以根據路由的mode分為hash和history模式。

先說本人更熟悉的hash模式。

一，多頁面要有多個入口

默認使用vue-cli 2初始化的項目，需要修改webpack的entry參數，修改兩個入口，如下

// 原來
  entry: {
    app: './src/main.js'
  },
  // 修改后
  entry: {
    index: './src/index/main.js',
    testp:'./src/testp/main.js'
  }

二，利用HtmlWebpackPlugin插件配置兩個html文件。

// 文件1
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
      chunks: ["index"],
      minify: {
        removeComment: true,
        collapseWhitespace: true
      },
      inject: true
    }),
    // 文件2
    new HtmlWebpackPlugin({
      filename: 'testp.html',
      template: './testp.html',
      chunks: ["testp"],
      minify: {
        removeComment: true,
        collapseWhitespace: true
      },
      inject: true
    })

當然需要創建兩個html，即index.html和testp.html。

三，改寫配置文件webpack.dev.conf.js

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        // { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
        { from: /\/testp/, to: path.posix.join(config.dev.assetsPublicPath, 'testp.html') },
      ],
    },
………………

這個是核心的。

最后hash模式下訪問需要類似這樣訪問http://localhost:8080/testp/#/。

至於mode為history模式，在開發環境下基本一致，除了訪問方式沒有#。另外就是多頁面的hash模式在生產環境下也需要后端配置的。

后續

如果是vue-cli3的項目，多頁面配置使用的是參數pages，類似下面這種形式

pages: {
    ui: {
      // page 的入口
      entry: "src/views/index/main.js",
      // 模板來源
      template: "public/index.html",
      // 在 dist/index.html 的輸出
      filename: "index.html",
      // 當使用 title 選項時，
      // template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "Index Page",
      // 在這個頁面中包含的塊，默認情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "ui"]
    },
    hh: {
      // page 的入口
      entry: "src/views/ui/main.js",
      // 模板來源
      template: "public/ui.html",
      // 在 dist/index.html 的輸出
      filename: "ui.html",
      // 當使用 title 選項時，
      // template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "Index Page",
      // 在這個頁面中包含的塊，默認情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "hh"]
    },
……………………