网站建设资讯

NEWS

网站建设资讯

详解VueCLI3多页应用实践和源码设计-创新互联

 对于一个网站来说,即需要h6页面也同时需要web页面,而h6和web页面共用很多代码,不做响应式,只能拆分两个页面来写,一个h6,一个web.用vue cli3怎么配置h6与web的应用呢?

成都创新互联科技有限公司专业互联网基础服务商,为您提供香港机房服务器托管高防主机,成都IDC机房托管,成都主机托管等互联网服务。

解决思路:


首先,需要产生多页面应用,用webpack配置成多页面应用,一个h6一个web,这个网上已经有很多教程了,下面会再整理一次,接着把所有公共的代码提到多页面目录外面.

我们看一下官网给的 multi-page 的配置:需要在 vue.config.js 配置 pages,示例如下:

pages: {
 index: {
  // page 的入口
  entry: 'src/index/main.js',
  // 模板来源
  template: 'public/index.html',
  // 在 dist/index.html 的输出
  filename: 'index.html',
  // 当使用 title 选项时,
  // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.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'
 }

当前文章:详解VueCLI3多页应用实践和源码设计-创新互联
文章位置:http://cdweb.net/article/ggdde.html