Vue-loader 不识别 es2015 语法

Posted 2023-03-22

技术标签:

【中文标题】Vue-loader 不识别 es2015 语法【英文标题】：Vue-loader does not recognize es2015 syntax 【发布时间】：2016-08-23 17:53:44 【问题描述】：

我遇到了 vue-loader 无法识别 es2015 格式的问题。

以下是我正在采取的步骤：

//initialize the project via vue-cli
vue init webpack-simple && npm i

// start the webpack-dev-server, this npm script is an alias for the command:
// webpack-dev-server --inline --hot
npm run dev

此时文件正在由 webpack-dev-server 在 localhost:8080 成功托管。

当我修改 App.vue 并在其中添加任何 es2015 时，我从 webpack-dev-server 收到错误：

<template>
  <div id="app">
    <h1> msg </h1>
  </div>
</template>

<script>
export default 
  data () 
    return 
      msg: 'Hello Vue!'
    
  ,
  // added this function call for the ready lifecycle hook
  ready () => alert('worked')

</script>

<style>
body 
  font-family: Helvetica, sans-serif;

</style>

这让我觉得没有安装 babel 的 es2015 预设，但它肯定与 transform-runtime 一起在 dev 依赖项列表中：

// truncated package.json

  ...
  "scripts": 
    "dev": "webpack-dev-server --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  ,
  "dependencies": 
    "vue": "^1.0.0",
    "babel-runtime": "^5.8.0"
  ,
  "devDependencies": 
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "cross-env": "^1.0.6",
    "css-loader": "^0.23.0",
    "file-loader": "^0.8.4",
    "json-loader": "^0.5.4",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^8.2.1",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0"

加上docs for vue-loader 表示默认启用es2015：