vue-cli 3.0 多頁面怎么配置？

版本: @vue/cli-service": "^3.0.0-beta.6

配置了chaiWebpack,但configureWebpack不知道怎么配置，求指點(diǎn)~~

vue.config.js 如下：

module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    config
      .entry('one')
      .add('./src/pages/one/one.ts')
      .end()
      .entry('two')
      .add('./src/pages/two/two.ts')
      .end()
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      // mutate for development...
    }
  }
}

回答

編輯回答

怪痞

// vue.config.js
module.exports = {
pages: {

index: {
  // entry for the page
  entry: 'src/main.js',
  // the source template
  template: 'public/index.html',
  // output as dist/index.html
  filename: 'index.html'
},
shareback: {
  entry: 'src/shareback.js',
  template: 'public/shareback.html',
  filename: 'shareback.html'
},

}
}

2018年9月17日 17:41

編輯回答

你的瞳

https://cli.vuejs.org/zh/conf... 看官方文檔。

2017年10月13日 07:29

編輯回答

久礙你

也是昨天才研究好的
先貼代碼

let path = require('path')
let glob = require('glob')
let fs = require('fs')
let meta = require('./package.json')

let webpack = require("webpack");

//獲取入口js和模板html
function getEntry(globPath) {
    let entries = {},
        basename, tmp, pathname, appname;

    glob.sync(globPath).forEach(function(entry) {
        basename = path.basename(entry, path.extname(entry));
        tmp = entry.split('/').splice(-3);
        pathname = basename; // 正確輸出js和html的路徑

        appname = pathname.split('-')[0]
        entries[appname] = entry;
    });
    return entries;
}

let htmls = getEntry('./src/module/**/*.html');
let allJs = getEntry('./src/module/**/*-en.js');//添加后綴方便查找

module.exports = {
    chainWebpack: config => {
        //設(shè)置路徑別名
        config.resolve.alias
            .set("assets", path.resolve(__dirname, 'src/assets'))
            .set("components", path.resolve(__dirname, 'src/components'))

        config.plugins.delete("html")
        config.entryPoints.delete("app")

        //設(shè)置生產(chǎn)環(huán)境打包配置
        if(process.env.NODE_ENV === 'production') {
            config
                .devtool()

            let prefix = meta.envirmentDebug ? "t" : "p"
            config
                .output
                .publicPath('https://xxx.xxx.com/' + prefix + '/' + meta.name + '/' + meta.v)
        }

        for(let appname in allJs) {
            config
                .entry(appname)
                .clear()
                .add(allJs[appname])
                .end()
        }

        for(let appname in htmls) {

            let htmlPath = path.resolve(htmls[appname])

            config
                .plugin(appname)
                .use(require('html-webpack-plugin'), [
                    fs.existsSync(htmlPath) ? {
                        template: htmlPath,
                        filename: appname + ".html",
                        inject: true,
                        hash: true,
                        chunks: ['manifest', 'vendor', appname]
                    } : {}
                ])
        }
    }
}

不清楚的在追問吧~ 先寫到這里

2017年1月24日 08:50

編輯回答

空痕

可以直接在vue.config.js 中設(shè)置 pages屬性來做到

// vue.config.js
module.exports = {
  pages: {
    index: {
      // 入口js的路徑
      entry: './src/views/index/entry',
      // 頁面模板路徑
      template: `./src/views/index/index.html`
    }
  }
}

pages 可以遍歷獲得

在 @vue/cli-service/lib/config/app.js 中有下面一段，里面已經(jīng)考慮了多頁的情況

// @vue/cli-service/lib/config/app.js
...

const multiPageConfig = options.pages

...

if (!multiPageConfig) {
  // default, single page setup.
  ......
} else {
  // multi-page setup
  webpackConfig.entryPoints.clear()
  const pages = Object.keys(multiPageConfig)
  pages.forEach(name => {
    const {
      entry,
      template = `public/${name}.html`,
      filename = `${name}.html`
    } = multiPageConfig[name]
    // inject entry
    webpackConfig.entry(name).add(api.resolve(entry))

    // inject html plugin for the page
    const pageHtmlOptions = Object.assign({}, htmlOptions, {
      chunks: ['chunk-vendors', 'chunk-common', name],
      template: fs.existsSync(template) ? template : defaultHtmlPath,
      filename
    })

    webpackConfig
      .plugin(`html-${name}`)
        .use(HTMLPlugin, [pageHtmlOptions])
  })

  pages.forEach(name => {
    const { filename = `${name}.html` } = multiPageConfig[name]
    webpackConfig
      .plugin(`preload-${name}`)
        .use(PreloadPlugin, [{
          rel: 'preload',
          includeHtmlNames: [filename],
          include: {
            type: 'initial',
            entries: [name]
          },
          fileBlacklist: [/\.map$/, /hot-update\.js$/]
        }])

    webpackConfig
      .plugin(`prefetch-${name}`)
        .use(PreloadPlugin, [{
          rel: 'prefetch',
          includeHtmlNames: [filename],
          include: {
            type: 'asyncChunks',
            entries: [name]
          }
        }])
  })
}

2017年9月8日 00:40

編輯回答