Q&ALaravel＋Vue環境で eslintを入れているのですが、eslint実行時に
error 'Vue' is not defined
が出てしまいます。（ターミナルにエラーは出るものの、Vueファイルのコンパイル自体はできる）
原因がわからないので、教えていただけると幸いです。
各種ファイルの設定以下の通りです。
app.js
js
1/** 2 * First we will load all of this project's JavaScript dependencies which 3 * includes Vue and other libraries. It is a great starting point when 4 * building robust, powerful web applications using Vue and Laravel. 5 */ 6 7require('./bootstrap'); 8 9window.Vue = require('vue'); 10 11/** 12 * The following block of code may be used to automatically register your 13 * Vue components. It will recursively scan this directory for the Vue 14 * components and automatically register them with their "basename". 15 * 16 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> 17 */ 18 19// const files = require.context('./', true, /.vue$/i) 20// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) 21 22Vue.component('example-component', require('./components/ExampleComponent.vue').default); 23 24/** 25 * Next, we will create a fresh Vue application instance and attach it to 26 * the page. Then, you may begin adding components to this application 27 * or customize the JavaScript scaffolding to fit your unique needs. 28 */ 29 30const app = new Vue({ 31 el: '#app', 32}); 33
ExampleComponent.vue
<template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Example Component</div> <div class="card-body"> I'm an example component. </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script>
eslintrc.js
let rules = { "no-unused-vars": ["warn", { vars: "local", args: "none" }], "no-undef": "warn", "no-redeclare": "warn", "no-debugger": "warn", "no-console": "warn", "no-empty": "warn" }; if (process.env.NODE_ENV == "production") { rules["no-debugger"] = "error"; rules["no-console"] = "error"; } module.exports = { plugins: [ "vue" ], extends: [ "eslint:recommended", "plugin:vue/essential", 'plugin:vue/recommended'// vue.js使ってなくてもlaravel-mix-eslintの仕様上必要 ], env: { browser: true, es6: true, amd: true, jquery: true }, parserOptions: { parser: 'babel-eslint', ecmaVersion: "2018" }, rules: { "quotes": ["warn", "single"] }, globals:[ "Vue: true" ] };
webpack.mix.js
js
1const mix = require('laravel-mix'); 2const path = require('path'); 3require('laravel-mix-eslint'); 4require('laravel-mix-stylelint'); 5 6/* 7 |-------------------------------------------------------------------------- 8 | Mix Asset Management 9 |-------------------------------------------------------------------------- 10 | 11 | Mix provides a clean, fluent API for defining some Webpack build steps 12 | for your Laravel application. By default, we are compiling the Sass 13 | file for the application as well as bundling up all the JS files. 14 | 15 */ 16 17const styleLintPlugin = require('stylelint-webpack-plugin'); 18mix.webpackConfig({ 19 plugins: [ 20 new styleLintPlugin({ 21 files: ['**/*.scss'], 22 configFile: path.join(__dirname, '.stylelintrc.js'), 23 syntax: 'scss' 24 }) 25 ] 26}).eslint(); 27mix.js('resources/js/app.js', 'public/js') 28 .sass('resources/sass/app.scss', 'public/css') 29 .browserSync({ 30 files: [ 31 'resources/views/**/*.blade.php', 32 'public/**/*.*', 33 'routes/**/*.php', 34 '**/*.php' 35 ], 36 proxy: { 37 target: 'http://127.0.0.1:8000/' 38 } 39 }); 40
index.blade.php
php
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>index</title> 9</head> 10 11<body> 12 <div id="app"> 13 <example-component> 14 </example-component> 15 </div> 16 <script src="{{ mix('js/app.js')}}"></script> 17</body> 18 19</html>
package.json
json
1{ 2 "private": true, 3 "scripts": { 4 "dev": "npm run development", 5 "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 6 "watch": "npm run development -- --watch", 7 "watch-poll": "npm run watch -- --watch-poll", 8 "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", 9 "prod": "npm run production", 10 "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" 11 }, 12 "devDependencies": { 13 "axios": "^0.19", 14 "bootstrap": "^4.0.0", 15 "browser-sync": "^2.26.7", 16 "browser-sync-webpack-plugin": "^2.0.1", 17 "cross-env": "^5.1", 18 "eslint": "^6.8.0", 19 "eslint-loader": "^3.0.3", 20 "eslint-plugin-vue": "^6.0.1", 21 "jquery": "^3.2", 22 "laravel-mix": "^4.0.7", 23 "laravel-mix-eslint": "^0.1.3", 24 "laravel-mix-stylelint": "^0.2.0", 25 "lodash": "^4.17.13", 26 "popper.js": "^1.12", 27 "resolve-url-loader": "^2.3.1", 28 "sass": "^1.20.1", 29 "sass-loader": "7.*", 30 "stylelint": "^12.0.0", 31 "stylelint-config-recommended-scss": "^4.1.0", 32 "stylelint-scss": "^3.13.0", 33 "stylelint-webpack-plugin": "^1.1.2", 34 "vue": "^2.5.17", 35 "vue-template-compiler": "^2.6.10" 36 } 37} 38
回答1件
0
ベストアンサー
window.Vue = require('vue');をconst Vue = require('vue');に変更すればエラーが消えるかと思います
eslint:recommendedではstrictモードが有効になっているものとして解析します
これによりnew Vueとしている箇所で参照されるものがwindow.Vueではなく、ファイル内の変数Vueとなるため未定義のエラーが出力されているものと思います
投稿2020/01/24 14:30
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/01/24 14:37
退会済みユーザー
2020/01/25 00:00
退会済みユーザー
2020/01/25 13:42