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

Question

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

配置了chaiWebpack,但configureWebpack不知道怎么配置，求指点~~

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...
    }
  }
}

Answer 1

可以直接在vue.config.js 中 设置 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 中有下面一段，里面已经考虑了多页的情况

// @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]
          }
        }])
  })
}

Answer 2

// 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'
},

}
}

Answer 3

也是昨天才研究好的
先贴代码

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 => {
        //设置路径别名
        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")

        //设置生产环境打包配置
        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]
                    } : {}
                ])
        }
    }
}

不清楚的 在追问吧~ 先写到这里

Answer 4

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

Answer 5

这几天也在使用vue-cli@3.0，多页配置是在根目录下新建vue.config.js，里面有pages配置，文档。
而且在开发的时候会碰到找不到页面问题Cannot GET /ems/admin/home，可参考我提的问题，再次感谢回答我问题的哥们~

Answer 6

楼主解决没~~~