[ 使用 Laravel ^8.40 / Inertia JS / Vue ^3.2.11 / Laravel Mix ^6.0.31 ]
我正在开发一个用于发布客户端网站的多租户 SaaS 平台,其中每个租户都有一个或多个项目,每个项目都有自己的混合工作流程。每个租户项目都有针对该租户域的唯一路由,而不是每个单独租户的相同路由,这就是我配置并行混合工作流(每个项目一个工作流)的原因。我发现完全按照我想要的方式配置输出目录结构具有挑战性,我试图根据在线可用的文档来解决这个问题,但我确实觉得我错过了一些东西,而且我在兜圈子...
我的 Vue 组件和 Sass 样式存储在resources/{js|scss}/projects/{tenant}/
(也包括pages
子目录)中,我希望 Laravel Mix 将所有编译的 JS/CSS文件输出到public/projects/{tenant}/{js|css}/
并将mix-manifest.json
文件输出到public/projects/{tenant}
并拥有所有“ chunk'ed" 页面组件输出到与其他 JS 文件相同的文件夹...虽然我还没有完全完成...我尝试了各种选项组合,但还没有找到获胜的集合。
我的 webpack 文件({tenant}
这里是p017
):
const mix = require('laravel-mix');
const path = require('path');
mix
/* Setup */
.setPublicPath('public/projects/p017')
.disableNotifications()
.autoload({jquery: ['$', 'window.jQuery']})
.webpackConfig({
resolve: {
extensions: ['.js', '.json', '.vue', '.css', '.scss'],
alias: {
'@': path.resolve(__dirname, 'resources/js/'),
'~': path.resolve(__dirname, 'resources/scss/')
}
},
output: {
chunkFilename: 'projects/p017/js/[name].js?id=[chunkhash]'
},
devtool: 'inline-source-map'
})
.options({
postCss: [
require('postcss-import'),
require('tailwindcss')
],
processCssUrls: true,
cssNano: {
discardComments: {removeAll: true}
}
})
/* Scripts */
.js('resources/js/projects/p017/p017.js', 'projects/p017/js/app.js')
.vue({version: 3, extractStyles: 'projects/p017/css/vue.css'})
.extract('projects/p017/js/vendor.js')
/* Styles */
.sass('resources/scss/projects/p017/p017.scss', 'projects/p017/css/app.css')
/* Cleanup */
.sourceMaps()
.version();
这个 webpack 文件会导致以下(不需要的)目录结构(全部在 下public
):
projects/p017/projects/p017/css/app.css
projects/p017/projects/p017/css/vue.css
projects/p017/projects/p017/js/app.js
projects/p017/projects/p017/js/manifest.js
projects/p017/projects/p017/js/resources_js_projects_p017_pages_Home_vue.js
projects/p017/projects/p017/js/vendor.js
projects/p017/mix-manifest.json
...这是所需的目录结构(注意mix-manifest.json
不应该移动)...
projects/p017/css/app.css
projects/p017/css/vue.css
projects/p017/js/app.js
projects/p017/js/manifest.js
projects/p017/js/resources_js_projects_p017_pages_Home_vue.js
projects/p017/js/vendor.js
projects/p017/mix-manifest.json
如果我删除该.setPublicPath()
行,则该mix-manifest.json
文件位于public
目录中并与其他租户发生冲突,如果我将输出路径设置为.js()
、.vue()
、.extract()
和.sass()
,public/projects/{tenant}/{js|css}/...
然后将所有 JS/CSS 文件混合输出为/{js|css}/...
(删除projects/{tenant}
)解决他们实际去的地方。
可能的问题/解决方案:
有没有办法自定义 mix-manifest.json
目录甚至文件名本身,这样我就可以防止租户冲突?
或者,我可以在没有 Laravel Mix从输出路径中剥离的情况下添加public/
到每个输出目录中 吗?.js()
.vue()
.extract()
.sass()
projects/{tenant}
或者,我是否错过了一组更好/包罗万象的文档,更详细地描述了如何实现这一点?