Laravel Mix 和 VUE,未找到 VUE

Posted

技术标签:

【中文标题】Laravel Mix 和 VUE,未找到 VUE【英文标题】:Laravel Mix and VUE, VUE not found 【发布时间】:2019-02-13 16:39:49 【问题描述】:

所以我一直收到这个 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

app.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'
);

【问题讨论】:

你安装vue了吗?你运行了什么命令来产生这个错误? Vue 安装好了,我用 npm run dev,npm run prod 也报错。 你试过path.resolve(__dirname, 'node_modules/vue/dist'),吗? @Devon 我刚刚做了,我仍然得到同样的错误。 resources/assets/js/app.js 你可能有这行require('bootstrap')import bootstap from './bootstrap' 评论它并重试 【参考方案1】:

在您的 webpack.mix 文件中,您有以下行:path.resolve(__dirname, 'node_modules/vue'),

只要确保这是正确的,可能你需要定位一个 dist 文件夹或类似的文件夹,例如

path.resolve(__dirname, 'node_modules/vue/dist'),

【讨论】:

以上是关于Laravel Mix 和 VUE,未找到 VUE的主要内容,如果未能解决你的问题,请参考以下文章

未捕获的 ReferenceError:使用 laravel-mix webpack 时未定义 Vue

Laravel Mix 中的 Bootstrap-Vue CSS 编译

vue-cli-plugin-prerender-spa 生成错误未在 html 文件中找到

laravel + mix + vue 路由器错误:找不到导出'createStaticVNode'(导入为'_createStaticVNode')

带有 laravel-mix 的 vue-loader 15

如何使用 Laravel Mix 将 Vue 块文件放在 public/js 中?