我想构建两个独立的 vue 应用程序,它们将在 Express 应用程序中的两条不同路径上提供服务:“公共”vue 应用程序和“管理”vue 应用程序。这两个应用程序有自己的路由器和商店,但它们共享许多自定义组件。
如何编辑默认的 webpack 模板以使其根据两个不同的入口点(“public”和“admin”)输出两个单独的包?
目标是最终得到或多或少像这样的设置:
my-app/
+- ...
+- dist/
| +- admin/ Admin bundle and files
| +- public/ Public bundle and files
+- src/
| +- components/ Shared components
| +- admin/ Entry point, router, store... for the admin app
| +- public/ Entry point, router, store... for the public app
+- ...
必须有 2 个可用的开发服务器http://localhost:8080/admin http://localhost:8080/admin and http://localhost:8080/public http://localhost:8080/public每个项目必须位于 dist 中自己的文件夹中,并且拥有自己的公共文件夹
我今天有什么:
在根目录创建文件 vue.config.js
和:
module.exports = {
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: config => {
// If you wish to remove the standard entry point
config.entryPoints.delete('app')
// then add your own
config.entry('admin')
.add('./src/admin/index.js')
.end()
.entry('public')
.add('./src/public/index.js')
.end()
}
}
假设您需要完全独立的构建,并且一些共享脚本由您的条目引导,您可以添加单独的构建命令。
在你的 package.json“脚本”部分:
"scripts": {
"build:admin": "vue-cli-service build --dest dist/admin src/admin/index.js,
"build:public": "vue-cli-service build --dest dist/public src/public/index.js
}
对于管理员版本,您可以运行:
npm run build:admin
对于公共构建:
npm run build:public
欲了解更多信息,请查看构建目标文档 https://cli.vuejs.org/guide/build-targets.html.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)