码迷,mamicode.com
首页 > 其他好文 > 详细

vue多页面项目配置

时间:2020-04-25 19:00:40      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:ges   来源   log   hunk   plugin   cal   file   client   white   

一直以来更多的是进行单页面开发。但在与其他同行的交流中,发现多页面项目也是业务的一种需求,趁着今天有时间,今天搞了一下。

多页面的配置,自然也可以根据路由的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"]
    },
……………………

  

 

vue多页面项目配置

标签:ges   来源   log   hunk   plugin   cal   file   client   white   

原文地址:https://www.cnblogs.com/zhensg123/p/12774263.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!