laravel - Laravel Mix 和 VUE,未找到 VUE
问题描述
所以我一直收到这个 NPM 错误,我无法弄清楚为什么只是 VUE 无法解决。我正在使用 Laravel 5.6。这是 Laravel 的新安装,带有一些轻量级的 webpack 配置。我已将 webpackConfig 中的路径解析为 VUE,我相信它在 webpack.mix.js 中的提取步骤中失败了
Vue 安装在 node_modules/vue
使用 npm run dev 和 npm run prod 生成错误
包.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.10",
"axios": "^0.18",
"babel-jest": "^22.1.0",
"bootstrap": "^4.1.3",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"pace": "github:HubSpot/pace#v1.0.2",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.14.4",
"simple-line-icons": "^2.4.1",
"sweetalert2": "^7.0.7",
"vue": "^2.5.17"
},
"dependencies": {
"imagemin": "^6.0.0"
}
}
webpack.mix.js
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.setPublicPath('public');
/*
|--------------------------------------------------------------------------
| Webpack Config
|--------------------------------------------------------------------------
*/
mix.webpackConfig({
resolve: {
modules: [
path.resolve(__dirname, 'node_modules/bootstrap/dist'),
path.resolve(__dirname, 'node_modules/jquery/dist'),
path.resolve(__dirname, 'node_modules/vue'),
path.resolve(__dirname, 'node_modules/axios/dist'),
path.resolve(__dirname, 'node_modules/lodash'),
path.resolve(__dirname, 'node_modules/sweetalert2/dist'),
path.resolve(__dirname, 'node_modules/popper.js/dist')
]
}
});
/*
|--------------------------------------------------------------------------
| Vendor Extraction
|--------------------------------------------------------------------------
*/
mix.extract([
'vue',
'jquery',
'axios',
'sweetalert2',
'lodash',
'js/bootstrap',
'popper.js'
]);
/*
|--------------------------------------------------------------------------
| Autoload Dependancies
|--------------------------------------------------------------------------
*/
mix.autoload({
jquery: ['$', 'window.jQuery', 'jQuery']
});
/*
|--------------------------------------------------------------------------
| Mix App Resources
|--------------------------------------------------------------------------
| app.js | Application Javascript file
| app.scss | Applciation SCSS file
*/
mix
.js(['resources/js/app.js'], 'public/js')
.sass('resources/sass/app.scss', 'public/css');
/*
|--------------------------------------------------------------------------
| Mix In Production
|--------------------------------------------------------------------------
*/
if (mix.inProduction() || process.env.npm_lifecycle_event !== 'hot') {
mix.version();
}
NPM 错误
ERROR in multi vue jquery axios sweetalert2 lodash js/bootstrap popper.js
Module not found: Error: Can't resolve 'vue' in '/Path/To/Project/Project-Folder'
@ multi vue jquery axios sweetalert2 lodash js/bootstrap popper.js
应用程序.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
解决方案
在您的 webpack.mix 文件中,您有以下行:
path.resolve(__dirname, 'node_modules/vue'),
只要确保这是正确的,可能您需要定位一个 dist 文件夹或类似文件夹,例如
path.resolve(__dirname, 'node_modules/vue/dist'),
推荐阅读
- django - Django过滤空字段
- sql - 在 Snowflake SQL 上使用空值进行字符串连接
- angular - 我不希望 WebStorm 删除“import { Injectable } ...”之间的空格
- node.js - 为什么 {{user.username}} 在车把中不起作用
- jenkins - 自动化 Jenkins 作业创建 - 所有旧标签触发构建
- ios - Xamarin DevOps 构建失败
- excel - 基于查找 ID 聚合值,同时满足多个条件
- database - 创建高效、快速、增量的 InfluxDB 数据库备份
- javascript - Javascript 异步执行的机制
- javascript - 如何使输入显示 HEX?