vue-cli 打包后提交到线上出现 “Uncaught SyntaxError:Unexpected token” 报错

当使用vue-cli进行代码打包后，提交到线上服务器运行时，有时会遇到类似于“Uncaught SyntaxError: Unexpected token”这样的报错，这种问题可能是由于代码中存在ES6语法而服务器不支持引起的。针对这种问题，可以采取以下几个步骤：

1. 确认线上服务器是否支持ES6语法，如果不支持，则需要对代码进行转译处理。

2. 使用babel对代码进行转译处理。babel是一个广泛使用的ES6转译工具，可以将ES6代码转换成ES5代码，使之能够在更多的浏览器和服务器环境下运行。

示例一：

假设有以下代码：

let a = 10;
const b = 20;

在提交到服务器后，会报出：“Uncaught SyntaxError: Unexpected token 'let'”这样的错误。这是由于服务器不支持ES6的let和const语法，因此需要使用babel进行转译。

首先，在项目中安装babel-loader和babel-preset-env：

npm install --save-dev babel-loader babel-preset-env

接下来，在webpack.config.js的module.rules中添加babel-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }
}

这样就可以对所有的JS文件进行ES6转译处理了。

示例二：

假设有以下代码：

const [a, b] = [1, 2];

在提交到服务器后，会报出：“Uncaught SyntaxError: Unexpected token 'const'”这样的错误。这是由于服务器不支持ES6的解构语法，因此需要使用babel进行转译。

首先，在项目中安装babel-plugin-transform-es2015-destructuring：

npm install --save-dev babel-plugin-transform-es2015-destructuring

接下来，在.babelrc文件中添加这个插件：

{
  "plugins": ["transform-es2015-destructuring"]
}

这样就可以对所有的JS文件进行ES6解构语法转译处理了。

综上所述，通过以上步骤，可以有效地解决“vue-cli打包后提交到线上出现”Uncaught SyntaxError: Unexpected token"”这样的报错问题。