Vue.js 将Vue组件作为入口点而不是main.js

我正在使用Java后端和Jersey，希望有可能使用不同的小页面应用程序。 我的想法是有一个前端模块，其中我将有一个文件夹/应用程序。 文件夹应用程序将包含多个vue组件（即主应用程序）。 另一个文件夹/组件包含将在不同应用程序中使用的不同组件。 这个想法是有一个网页包，可以为每个vue应用程序创建一个js文件

---

我知道Webpack不是专门设计为具有多个入口点/多个输出的，但有人知道我如何能够将多个入口点作为不同的apps-file.vue并将多个.js文件作为输出

我遇到了一个类似的问题，并为我指明了正确的方向：我按照Vue CLI文档在

Vue.config.js

文件中添加了一个

经过一些实验，我找到了一个我满意的解决方案。我将其保存在repo中，该文件描述了如何从头开始创建多页Vue应用程序的步骤

我正在寻找的一些主要东西：

使用，这意味着您可以避免大多数网页 配置问题

不会强制您为每个应用程序创建入口点

.js

文件/ 页面

使用这种方法，您只需将一堆

.vue

文件放在

src/pages

目录中，它就会为每个文件生成一个单独的vue应用程序。（如果愿意，您可以非常轻松地将文件夹名称从

页面

更改为

应用程序

。）

自动生成页面配置和入口点 解决方案的关键是一个脚本，它为找到的每个

src/pages/bar.vue

文件创建一个

src/entry/bar/index.js

入口点文件，并生成一个

src/entry/pages.config.js

文件，您可以像这样导入

vue.config.js

文件：

constpagesconfig=require（“./src/entry/pages.config.js”）；
module.exports={
pages:pagesConfig，
};

以下是脚本：

const path=require（“路径”）；
常量全局=需要（“快速全局”）；
常数fse=要求（“fs额外”）；
常数R=要求（“拉姆达”）；
const{stripIndent}=require（“公共标记”）；
const pathGlob=processRelativePath（“../src/pages/***.vue”）；
const vuePagesPromise=glob（路径glob）；
log（`Generating entry points`）；
//步骤1：计算待完成工作的规格
const pagesConfigPromise=vuePagesPromise.then（页面=>{
返回pages.map（页面=>{
const{dir，name}=path.parse（第页）；
const entryRoot=path.relative（“src/pages”，dir）；
常量入口名=(
拆分（entryRoot，path.sep）
)康卡特先生(
EnsureendWith（[名称]，“索引”）
).join（path.sep）；
const entryFilePath=path.join(
processRelativePath（“../src/entry”），`${entryName}.js`
);
const importPath=路径相对（“src”，第页）；
const entryFileContent=entryPointContent（importPath）；
返回{
资料来源：第页，
入口名，
entryFilePath，
entryFileContent，
};
});
});
//步骤2：清除条目文件夹
const entryFolderPath=processRelativePath（“../src/entry”）；
fse.removeSync（entryFolderPath）；
log（`Cleared${entryFolderPath}`）；
//步骤3：为每个页面创建相应的入口点文件
页面配置promise.then（配置=>{
config.forEach（第=>{
outputFileSync（page.entryFilePath，page.entryFileContent）；
log（`Created${page.entryFilePath}`）；
});
});
//步骤4：创建一个pages.config.js
//module.exports={
//“索引”：“src/pages/index.js”，
//“login/index”：“src/pages/login.js”，
//“profile/index”：“src/pages/profile/index.js”，
//“foo/index”：“src/pages/foo.js”，
//“bar/index”：“src/pages/bar/index.js”，
// };
const pagesConfigPath=processRelativePath（“../src/entry/pages.config.js”）；
页面配置提示
。然后（配置=>{
//将每个转换为如下内容：
//{“login/index”：“src/pages/login.js”}
返回config.map（第=>({
[page.entryName]：page.entryFilePath，
}));
})
.然后（R.mergeAll）
。然后（页面配置内容）
.then（content=>fse.outputFileSync（pagesconfig路径，content））
.then（（）=>console.log（`Created${pagesConfigPath}`）；
功能页面配置内容（配置）{
返回条缩进`
module.exports=${JSON.stringify（config，null，2）}；
`;
}
函数processRelativePath（p）{
const pathToThisDir=path.relative（process.cwd（），uu dirname）；
返回path.join（pathToThisDir，p）；
}
//修复了空字符串（“”）的split（）行为
函数拆分（字符串、分隔符）{
if（string.length==0）{
返回[]；
}否则{
返回字符串.split（分隔符）；
}
}
函数ensureEndsWith（数组、项）{
if（array.slice（-1）[0]==项）{
返回数组；
}否则{
返回数组.concat（[item]）；
}
}
函数入口点内容（importPath）{
返回条缩进`
从“Vue”导入Vue；
从“@/${importPath}”导入页面；
新Vue({
呈现：h=>h（第页），
}).$mount（“#app”）；
`;
}

您可能应该删除

java

和

jersey

，因为它们是您服务器的一部分，但您的问题是关于客户端的，因此它们与此问题并不真正相关。请参见此处的第二个答案：您仍然需要为每个应用程序提供一个主js文件作为加载Vue组件的入口点。哇，很棒的脚本。但没有更简单的解决办法吗？i、 e.我可以安装一个网页包插件，允许在vue渲染中包装.vue输入模块？我感觉到了你的痛苦。我真的希望Vue能够解决这个问题，但他们似乎并不认为核心Vue库应该解决基于文件的路由问题。js是另一种基于文件的路由选择，您可以看看。