Laravel 6 Vue项目中import声明失效，PHPStorm提示JS版本不支持

Hey there, let's fix that PHPStorm import error in your Laravel 6 project. The issue isn't that Laravel 6 doesn't support ES6 import syntax—it's just PHPStorm failing to recognize your project's frontend configuration correctly. Here's how to resolve it step by step:

1. 更新PHPStorm的JavaScript语言版本 #

PHPStorm可能默认使用了不支持ES6导入语法的旧版本JS标准，我们先调整这个设置：

• 打开PHPStorm设置（Windows/Linux按Ctrl+Alt+S，Mac按Cmd+,）
• 导航到Languages & Frameworks > JavaScript
• 在JavaScript language version下拉菜单中，选择ECMAScript 6+（或者更新的版本比如ECMAScript 2020，都能支持import语法）
• 保存设置并重启PHPStorm生效

2. 关联PHPStorm与Laravel Mix/Webpack配置 #

Laravel 6用Webpack Mix编译前端资源，PHPStorm可以通过这个配置文件识别项目的JS规则：

• 回到设置中的Languages & Frameworks > JavaScript > Webpack
• 选择Manually选项，点击文件夹图标选择项目根目录下的webpack.mix.js文件
• 这会告诉PHPStorm你的资源编译逻辑，它就不会再把合法的ES6语法标记为错误了

3. 验证或添加Babel配置（可选但推荐） #

Laravel 6依赖Babel将ES6+代码转译为浏览器兼容的JS，添加Babel配置能帮助PHPStorm更好识别语法：

• 在项目根目录创建.babelrc文件，写入以下内容：

{
  "presets": [
    "@babel/preset-env"
  ]
}

• 通过npm安装必要的Babel依赖：

npm install @babel/core @babel/preset-env --save-dev

4. 清除PHPStorm缓存 #

有时候编辑器缓存会导致新设置无法生效：

• 点击File > Invalidate Caches...
• 在弹窗中选择Invalidate and Restart，等待PHPStorm重新加载

关于Laravel 6与Vue的额外提示 #

顺带提一句：Laravel 6的新版Mix默认不自带Vue支持，如果你在用Vue Router，记得安装Vue Mix扩展：

npm install laravel-mix-vue2 --save-dev

然后更新webpack.mix.js启用Vue编译：

const mix = require('laravel-mix');
require('laravel-mix-vue2');

mix.js('resources/js/app.js', 'public/js')
   .vue();

完成这些步骤后，PHPStorm就不会再标记你的import语句为无效，你可以顺利继续配置Vue Router了。

内容的提问来源于stack exchange，提问作者Shahin