Nuxt 错误：安装后语法意外的令牌导出答案

【问题标题】：Nuxt Error: Syntax Unexpected token export after installationNuxt 错误：安装后语法意外的令牌导出
【发布时间】：2019-06-20 08:38:31
【问题描述】：

我在我的 Vue 项目中使用 Nuxt，它运行良好。由于其他项目问题，我删除了我的 yarn 和 NPM 缓存。我为我的 Nuxt 应用程序重新安装了软件包。该应用程序是通用的并且使用快递。安装和开发服务器正在运行，但是当我尝试访问http://localhost:3000/时，

错误：

SyntaxError: Unexpected token export，每次都会出现。

我知道这是 babel 问题，但我不知道如何在 Nuxt 上解决此问题。

Nuxt 配置：

const pkg = require('./package')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    '@mdi/font/css/materialdesignicons.min.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui',
    '~/plugins/vee-validate.js'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    '@nuxtjs/apollo'
  ],
  apollo: {
    tokenName: 'yourApolloTokenName', // optional, default: apollo-token
    tokenExpires: 10, // optional, default: 7
    includeNodeModules: true, // optional, default: false (this includes graphql-tag for node_modules folder)
    authenticationType: 'Basic', // optional, default: 'Bearer'
    // optional
    errorHandler (error) {
      console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
    },
    // required
    clientConfigs: {
      default: {
        // required  
        httpEndpoint: 'http://localhost:4000',
        // optional
        // See https://www.apollographql.com/docs/link/links/http.html#options
        httpLinkOptions: {
          credentials: 'same-origin'
        },
        // You can use `wss` for secure connection (recommended in production)
        // Use `null` to disable subscriptions
        wsEndpoint: null, // optional
        // LocalStorage token
        tokenName: 'apollo-token', // optional
        // Enable Automatic Query persisting with Apollo Engine
        persisting: false, // Optional
        // Use websockets for everything (no HTTP)
        // You need to pass a `wsEndpoint` for this to work
        websocketsOnly: false // Optional
      },
      test: {
        httpEndpoint: 'http://localhost:5000',
        wsEndpoint: 'ws://localhost:5000',
        tokenName: 'apollo-token'
      },
      // alternative: user path to config which returns exact same config options
    }
  },
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {

    }
  }
}

我的package.json 文件

{
  "name": "app",
  "version": "1.0.0",
  "description": "My exceptional Nuxt.js project",
  "author": "Saima",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@mdi/font": "^3.3.92",
    "@nuxtjs/apollo": "^4.0.0-rc2.3",
    "@nuxtjs/axios": "^5.0.0",
    "cross-env": "^5.2.0",
    "element-ui": "^2.4.6",
    "express": "^4.16.3",
    "graphql-tag": "^2.10.1",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "nuxt": "^2.0.0",
    "vee-validate": "^2.1.5"
  },
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",
    "nodemon": "^1.11.0"
  }
}

我们将不胜感激。

【问题讨论】：

对Nuxt不熟悉，但是貌似是export语句前的语法错误，有没有检查./package目录下的语法错误？
@Azeame 我安装了一个新的 nuxt 应用程序，但仍然收到相同的错误消息。
@Azeame 包其实就是 package.json 文件。
@BeniaminH package.json 有效
可能是由插件造成的 ssr 问题引起的。您可以尝试像这样更改 nuxt.config.js 吗？ plugins: [{src: '~/plugins/element-ui', ssr: false},{src: '~/plugins/vee-validate.js', ssr: false}] 和构建部分，build: { transpile :[ '/plugins'], //leave other elements in...}

标签： javascript vue.js babeljs nuxt.js babel-loader

【解决方案1】：

我刚刚检查了您的问题，当您将元素 UI 与 Nuxt 一起使用时会发生这种情况。像这样更新你的 Nuxt 配置（Andrew Answer）：

plugins: [
  {src: '~/plugins/element-ui', ssr: false},
  {src: '~/plugins/vee-validate.js', ssr: true},
],

【讨论】：

是的，很公平。我没有测试它，但认为它必须是两者之一。
我测试了你的 sn-p 并且没问题。

【解决方案2】：

如果您要导入需要转译以加载到 UI 中的 ES6 模块，则可能会出现此错误。在这种情况下，可以通过将模块添加到 nuxt.config.js 的 build 部分的 transpile 键来解决此问题（在本文发布时，Nuxt transpile 文档有点混乱）。

例如，如果您尝试导入一个名为 @stylelib 的模块，那么您需要在 nuxt.config.js 中添加以下内容：

export default {
  ...
  build: {
    ...
    transpile: ['@stylelib']
  }
}

【讨论】：

【解决方案3】：

我遇到了同样的问题，它在我的 nuxt.config.js 文件中发现，我在该文件的末尾放置了一些带有“，”的额外代码。有问题的代码位于文件的顶部。

代码：

env: {  
  strapiBaseUri: process.env.API_URL || "http://localhost:1337"
},

我的设置详情是：

Nuxtjs（截至 2020 年 3 月 20 日的版本） Apollo 和 Graphql Strapi（后端）

【讨论】：

【解决方案4】：

对我来说（打字稿 Nuxt）它正在使用：

npm run start

代替：

npm run dev

【讨论】：