39

使用 Vue Cli 实现多页应用

 3 years ago
source link: https://www.itwork.club/2020/06/07/vue-multi-page-app/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

如何在 Vue Cli 下实现 多入口 的 Web App

快速配置

Cli 创建了一个 Vue 项目 之后

可以通过 vue.config.js 对项目进行配置

在 vue.config.js 里增加一个叫 pages 的项 

module.exports = {
  pages: {
    index: 'src/main.js',
    another: 'src/another/main.js'
  }
}

上述代码中，除了默认就有的 src/main.js 入口文件，我们又增加了 another/main.js 入口文件

这就是 实现多页应用 最简单的配置方式了

当然，我们可以组织一下项目结构，将不同的页面归入 src/pages 的目录下，以便维护以后可能出现的更多的 pages 

module.exports = {
  pages: {
    index: 'src/pages/index/main.js', // 文件中的引用路径也要有相应的修改
    another: 'src/apges/another/main.js'
  }
}

配置细节

上面的方式只是简单的配置了一下不同的 入口 js 文件的路径

除此之外，还可以对每个入口的细节进行配置，比如： 模板来源 、 输出名称 、 title 、 页面中包含的块

如 Vue Cli 文档里的示例代码： 

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/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', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}

运行项目

将项目在本地跑起来之后，默认的根路径是指向了 index 这个入口

想要去到其他入口的话，可以将浏览器中的地址改为对应入口的 html

比如： localhost:3001/another.html


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK