Laravel Mix Vue 3 - 无法编译“TypeError：无法读取未定义的属性‘解析’”

Question

我正在尝试将 Laravel 8 与 Vue 2 升级到 Vue 3。我更改了 package.json 中的所有包以支持新的 Vue 3 依赖项。我什至无法使用 Vue 3 编译一个简单的测试应用程序。当我尝试构建时遇到的错误并没有给我太多信息。

\n

当我尝试“纱线观察”时，有人知道如何解决此错误吗？

\n

\xce\xbb yarn watch\nyarn run v1.22.5\n$ mix watch\n[webpack-cli] TypeError: Cannot read property 'resolve' of undefined\n    at Alias.register (c:\\wamp\\www\\Stipender\\node_modules\\laravel-mix-alias\\index.js:8:37)\n    at Object.components.<computed> [as alias] (c:\\wamp\\www\\Stipender\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js:133:53)\n    at Object.<anonymous> (c:\\wamp\\www\\Stipender\\webpack.mix.js:15:5)\n    at Module._compile (c:\\wamp\\www\\Stipender\\node_modules\\v8-compile-cache\\v8-compile-cache.js:192:30)\n    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)\n    at Module.load (node:internal/modules/cjs/loader:973:32)\n    at Function.Module._load (node:internal/modules/cjs/loader:813:14)\n    at Module.require (node:internal/modules/cjs/loader:997:19)\n    at require (c:\\wamp\\www\\Stipender\\node_modules\\v8-compile-cache\\v8-compile-cache.js:159:20)\n    at module.exports (c:\\wamp\\www\\Stipender\\node_modules\\laravel-mix\\setup\\webpack.config.js:4:5)\nerror Command failed with exit code 2.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n

\n

包.json

\n

{\n    "private": true,\n    "scripts": {\n        "development": "mix",\n        "watch": "mix watch",\n        "watch-poll": "mix watch -- --watch-options-poll=1000",\n        "hot": "mix watch --hot",\n        "production": "mix --production"\n    },\n    "devDependencies": {\n        "@babel/core": "^7.12.10",\n        "@babel/helper-validator-option": "^7.12.11",\n        "@babel/plugin-proposal-optional-chaining": "^7.12.7",\n        "@babel/plugin-transform-runtime": "^7.12.10",\n        "@babel/polyfill": "^7.11.5",\n        "@babel/preset-env": "^7.12.11",\n        "@fortawesome/fontawesome-pro": "^5.15.1",\n        "@vue/cli-plugin-babel": "^4.5.10",\n        "@vue/compiler-sfc": "^3.0.2",\n        "babel-loader": "^8.2.2",\n        "cross-env": "^7.0.3",\n        "jquery": "^3.5.1",\n        "laravel-mix": "^6.0.9",\n        "lodash": "^4.17.20",\n        "node-sass": "^5.0.0",\n        "resolve-url-loader": "^3.1.2",\n        "sass": "^1.32.2",\n        "sass-loader": "^10.0",\n        "vue-loader": "^16.1.2"\n    },\n    "dependencies": {\n        "@vee-validate/rules": "^4.0.4",\n        "admin-lte": "^3.0.5",\n        "axios": "^0.21.1",\n        "bootstrap": "^4.5.3",\n        "chart.js": "^2.9.3",\n        "dayjs": "^1.10.2",\n        "laravel-mix-alias": "^1.0.2",\n        "mitt": "^2.1.0",\n        "moment": "^2.29.1",\n        "owl.carousel": "^2.3.4",\n        "popper.js": "^1.16.1",\n        "primevue": "3.1.1",\n        "simple-line-icons": "^2.5.5",\n        "style-loader": "^2.0.0",\n        "sweetalert2": "^10.13.0",\n        "v-calendar": "^2.1.6",\n        "vee-validate": "^4.0",\n        "vue": "^3.0.5",\n        "vue-recaptcha-v3": "^2.0.0",\n        "vue-router": "^4.0.0-beta.13",\n        "vue-slider-component": "^3.2.11",\n        "vuex": "^4.0.0-rc.2",\n        "wowjs": "^1.1.3"\n    }\n}\n

\n

webpack.mix.js

\n

const mix = require('laravel-mix');\nrequire('laravel-mix-alias');\n\n/*\n |--------------------------------------------------------------------------\n | Mix Asset Management\n |--------------------------------------------------------------------------\n |\n | Mix provides a clean, fluent API for defining some Webpack build steps\n | for your Laravel application. By default, we are compiling the Sass\n | file for the application as well as bundling up all the JS files.\n |\n */\n\nmix.alias({\n    '@': '/node_modules',\n    '~': '/node_modules',\n})\n    .autoload({ 'jquery': ['window.$', 'window.jQuery', '$', 'jQuery'] })\n    .js('resources/website/js/Vue3test.js', 'public/website/js').vue()\n    .sass('resources/website/css/app.scss', 'public/website/css')\n    .copyDirectory('resources/website/images','public/website/images')\n    .copyDirectory('resources/website/images','public/images')\n    .copyDirectory('resources/views/emails/images','public/images/email')\n\n\n    .sourceMaps();\n

\n

Answer 1

使用 mix.webpackConfig 代替 mix.alias({...})。但是，对于node_modules，您不需要别名。例如，要导入，vue-property-decorator您只需执行以下操作：

import {Vue, Component} from 'vue-property-decorator';

对于位于 /resources/js/ 中的自定义组件，您可以执行以下操作：（
注意：我尚未使用 进行验证，但如果您在下面的示例中替换为node_modules，它应该可以工作。）resources/jsnode_modules

mix.autoload({ 'jquery': ['window.$', 'window.jQuery', '$', 'jQuery'] })
    .js('resources/website/js/Vue3test.js', 'public/website/js').vue()
    .sass('resources/website/css/app.scss', 'public/website/css')
    .copyDirectory('resources/website/images','public/website/images')
    .copyDirectory('resources/website/images','public/images')
    .copyDirectory('resources/views/emails/images','public/images/email')
    
    .webpackConfig({
        resolve: {
            extensions: [".ts", ".tsx", ".js", ".jsx", ".vue", "*"],
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.resolve(__dirname, 'resources/js/'),
                '~': path.resolve(__dirname, 'resources/sass/')
            },
        },
    })

    .sourceMaps();

然后在你的 tsconfig.json 中：

"compilerOptions": {
    "paths": {
      "@*": ["./*"]
    }
}

然后您可以从 /resources/js/components/ExampleComponent.vue 导入组件，如下所示：

import ExampleComponent from '@/components/ExampleComponent'