you can set the pages property directly in vue.config.js to do so
// vue.config.js
module.exports = {
pages: {
index: {
// js
entry: './src/views/index/entry',
//
template: `./src/views/index/index.html`
}
}
}
pages can be traversed to get
there is the following paragraph in @ vue/cli-service/lib/config/app.js, in which multiple pages have been considered
// @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]
}
}])
})
}
/ / 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'
},
}
}
is also studied yesterday
paste the code first
let path = require('path')
let glob = require('glob')
let fs = require('fs')
let meta = require('./package.json')
let webpack = require("webpack");
//jshtml
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; // jshtml
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]
} : {}
])
}
}
}
ask questions that are not clear. ~ that's all for now
https://cli.vuejs.org/zh/conf. see the official document.
is also used these days. The multi-page configuration of vue-cli@3.0, is created vue.config.js
in the root directory, with pages
configuration and document .
and when developing, you will encounter page problems that cannot be found Cannot GET / ems/admin/home
. Please refer to my question . Thank you again for answering my question, buddy ~
whether the landlord has solved the problem ~
.