Question

我正在使用webpack 4.29.3和vue.js 2.6.3。我只是试图用vue js和webpack创建一个简单的hello world项目。我希望index.html会呈现良好。但是，我得到了错误：SyntaxError：字符类中的范围无效，这真的很奇怪，因为我对正则表达式不做任何事情。这就是为什么我不确定要修复哪个部分的原因。

vue-first.js：

import Vue from 'vue';

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

index.html：

<!doctype html>
<html>
 <head>
   <title>Getting Started</title>
 </head>
 <body>
   <div id="app">
     {{ message }}
   </div>
   <script src="todo.js"></script>
 </body>
</html>

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/js/vue-first.js',
  output: {
    filename: 'todo.js',
    path: path.resolve(__dirname, 'dist')
  }
};

package.json

{
  "name": "vue-first",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "vue": "^2.6.3"
  }
}

完整的错误消息（来自Safari）：

[Error] SyntaxError: Invalid regular expression: range out of order in character class
    RegExp (todo.js:7:3226)
    (anonymous function) (todo.js:7:3226)
    (anonymous function) (todo.js:7:63703)
    n (todo.js:1:115)
    (anonymous function) (todo.js:7:63775)
    n (todo.js:1:115)
    (anonymous function) (todo.js:1:904)
    Global Code (todo.js:1:912)

有关更多详细信息，您可以检出我的Github。

Answer 1

看来，您至少需要指定构建mode，并告诉Webpack使用其内置的优化功能并为Vue添加一个alias。

const path = require('path');

module.exports = {
  mode: 'development',

  entry: './src/js/vue-first.js',
  output: {
    filename: 'todo.js',
    path: path.resolve(__dirname, 'dist')
  },

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  }
};

vue + webpack：SyntaxError：字符类中的范围无效

1 个答案: