npm run watch 不会在特定更改时重新加载

Question

一旦我改变了一些东西，我想用它npm run watch来重建我的资产。

\n\n

这对于几乎所有文件都适用，但不适用于我添加到pages目录的文件。如果我npm run watch在更改pages-dir 后再次运行，则正在处理更改。

\n\n

这是我的树：

\n\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.vue\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Cards\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Video.vue\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 entry-point.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 layouts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Layout1.vue\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 pages\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Home\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 View.vue\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 router\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 errors.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 home.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 stores\n

\n\n

这是App.vue：

\n\n

<template>\n    <router-view/>\n</template>\n\n<script>\n    export default {\n        name: \'app\',\n    }\n</script>\n

\n\n

这是main.js

\n\n

import Vue from \'vue\'\nimport App from \'./App\'\nimport Routes from \'@/js/router/index\'\n\nconst main = new Vue({\n    el: \'#app\',\n    router: Routes,\n    render: h => h(App)\n});\n\nexport default main;\n

\n\n

这是 router/index.js：

\n\n

import Vue from \'vue\'\nimport Router from \'vue-router\'\n\nimport homeRoutes from \'./home\'\n\nVue.use (Router);\n\nconst ROUTES = [\n    // Default route\n    {path: \'\', redirect: \'/home\'}\n]\n.concat (homeRoutes);\n\nconst router = new Router ({\n    base: \'/\',\n    mode: \'history\',\n    routes: ROUTES\n});\n\nexport default router\n

\n\n

这是router/home.js：

\n\n

import Layout1 from \'@/js/layouts/Layout1\'\n\nexport default [{\n    path: \'/home\',\n    component: Layout1,\n    children: [{\n        path: \'/\',\n        component: () => import( /* webpackChunkName: "home-view" */ \'@/js/Pages/Home/View\'),\n    }]\n}]\n

\n\n

现在我们得到了webpack.mix.js：

\n\n

const {EnvironmentPlugin} = require (\'webpack\');\nconst mix = require (\'laravel-mix\');\nconst glob = require (\'glob\');\nconst path = require (\'path\');\nconst {CleanWebpackPlugin} = require (\'clean-webpack-plugin\');\nconst ChunkRenamePlugin = require (\'webpack-chunk-rename-plugin\');\n\nrequire (\'laravel-mix-tailwind\');\nrequire (\'laravel-mix-purgecss\');\n\n\nmix.webpackConfig ({\n    output: {\n        chunkFilename: \'js/chunks/[name].[chunkhash].js\'\n    },\n    plugins: [\n        new CleanWebpackPlugin ({\n            cleanOnceBeforeBuildPatterns: [\'chunks/**/*\']\n        }),\n        new EnvironmentPlugin ({\n            BASE_URL: \'/\'\n        }),\n        new ChunkRenamePlugin ({\n            initialChunksWithEntry: true,\n            \'/js/app\': \'js/entry-point.js\',\n            \'/js/vendor\': \'js/vendor.js\',\n        }),\n    ],\n    module: {\n        rules: [\n            {\n                test: /node_modules(?:\\/|\\\\).+\\.js$/,\n                loader: \'babel-loader\',\n                options: {\n                    presets: [[\'@babel/preset-env\', {targets: \'last 2 versions, ie >= 10\'}]],\n                    plugins: [\'@babel/plugin-transform-destructuring\', \'@babel/plugin-proposal-object-rest-spread\', \'@babel/plugin-transform-template-literals\'],\n                    babelrc: false\n                }\n            },\n        ]\n    },\n    resolve: {\n        alias: {\n            \'@\': path.join (__dirname, \'resources\'),\n            \'node_modules\': path.join (__dirname, \'node_modules\')\n        }\n    },\n});\n\nmix.js (\'resources/js/entry-point.js\', \'public/js\')\n.postCss (\'resources/css/app.css\', \'public/css\')\n.tailwind (\'./tailwind.config.js\');\n\n\nif (mix.inProduction ()) {\n    mix\n    .version ()\n    .purgeCss ();\n}\n\n

\n\n

我认为发生这种情况是因为我缺少配置webpack.mix.js，但我无法弄清楚如何解决这个问题。

\n

Answer 1

解决方案很简单：Pages目录在文件结构中是小写的，但在我的路由器定义中是大写的。