在npm run dev

Question

我的应用程序的某些部分是使用VueJS构建的。完整的应用程序基于Laravel框架构建，因此我使用Laravel Mix来编译我的css / js-assets。为了获得更好的概述，我已将应用程序的某些部分放在单独的程序包中，例如：

• 应用
• 引导程序
• config
• ...
• 包装
  • 目录
  • 资源
  • js
    • 组件
    • CatalogComponentA.vue
    • ...
    • catalog.js
• ...
• 资源
  • 资产
  • js
  • VueComponents
    • ComponentA.vue
    • ...
  • app.js

在本地运行npm（在Homestead / Vagrant中或在我的操作系统下）运行都很好。将其部署到我的Web服务器会导致错误，提示未找到依赖项：

*/home/forge/my-domain.com/packages/catalog/resources/js/Components/AddressAutoComplete in ./packages/catalog/resources/js/catalog.js
*/home/forge/my-domain.com/packages/catalog/resources/js/Components/Vehicle in ./packages/catalog/resources/js/catalog.js
*/home/forge/my-domain.com/packages/catalog/resources/js/Components/VehicleList in ./packages/catalog/resources/js/catalog.js
...

我在所有系统上都具有相同版本的npm。我尝试重新安装我的npm软件包，并尝试了Vue.component('my-component', require('./path-to-my-component'))

我的catalog.js使用其自己的子目录中的组件：

require('./../../../../resources/assets/js/app_bootstrap');

window.Vue = require('vue');

require('./../../../../resources/assets/js/coreComponents');

// Components
Vue.component('address-autocomplete', require(__dirname + '/Components/AddressAutoComplete'));
Vue.component('vehicle-list', require(__dirname + '/Components/VehicleList'));
Vue.component('vehicle', require(__dirname + '/Components/Vehicle'));
...

我的webpack.mix.js的配置如下：

let mix = require('laravel-mix');

let cssPath = 'public/css';
let jsPath = 'public/js';

if (mix.inProduction()) {
    mix.js('resources/assets/js/app.js', jsPath)
        .js('packages/catalog/resources/js/catalog.js', jsPath)
        .sass('packages/catalog/resources/sass/catalog.scss', cssPath)
        .sass('resources/assets/sass/app.scss', cssPath)
        .sourceMaps()
        .version();
} else {
    mix.js('resources/assets/js/app.js', jsPath)
        .js('packages/catalog/resources/js/catalog.js', jsPath)
        .sass('packages/catalog/resources/sass/catalog.scss', cssPath)
        .sass('resources/assets/sass/app.scss', cssPath)
        .sourceMaps();
}

Answer 1

问题出在文件结尾。无法加载的组件具有大写文件扩展名（.Vue而不是.vue）。因为我的服务器操作系统区分大小写，所以无法加载模块。