【问题标题】:nuxt error "Uncaught SyntaxError: Unexpected token '<'" when deploying in production在生产中部署时出现 nuxt 错误“Uncaught SyntaxError: Unexpected token '<'”
【发布时间】:2021-09-08 13:13:27
【问题描述】:

在我的生产服务器上部署我的应用程序(SPA 和 CSR)之后(在 yarn run build 之后)

从第一页和其他页面(入口点/)我收到以下错误:Uncaught SyntaxError: Unexpected token '

直接指向的第一个

我的环境:

节点版本:14.10.1 nuxt 版本:

package.json

{
  "name": "secret-app-name",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt --dotenv .env.dev",
    "build": "nuxt build --dotenv .env.prod",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "jest"
  },
  "dependencies": {
    "@nuxt/utils": "^2.15.3",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/dotenv": "^1.4.1",
    "@ryanburnette/vue-closable": "^1.0.0",
    "@tailwindcss/forms": "^0.3.3",
    "cross-env": "^7.0.2",
    "moment": "^2.29.1",
    "nuxt": "^2.15.3",
    "vue-carousel": "^0.18.0",
    "vue-js-modal": "^2.0.1",
    "v-clipboard": "^2.2.3",
    "vue-clipboard": "^0.0.1",
    "vue-slick-carousel": "^1.0.6",
    "vue-slider-component": "^3.2.14",
    "vue-toast-notification": "^0.6.2"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/auth-next": "^5.0.0-1624817847.21691f1",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/tailwindcss": "^4.0.1",
    "@vue/test-utils": "^1.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^26.6.3",
    "glob": "^7.1.6",
    "jest": "^26.6.3",
    "postcss": "^8.2.8",
    "ts-jest": "^26.5.4",
    "vue-jest": "^3.0.4"
  }
}

nuxt.config.js

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  theme: 'basic',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    titleTemplate: '%s',
    title: '',
    htmlAttrs: {
      lang: 'fr'
    },
  },
  /*
   ** Customize the progress-bar color
   */
  loading: {
    color: '#000'
  },
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    "~/assets/css/default.css",
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~/plugins/detector.client.js',
    '~/plugins/vue-packages.client.js',
    '~/plugins/axios-catcher.client.js'
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
    '@nuxtjs/dotenv'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/pwa',
  ],

  pwa: {
    icon: false,
    manifest: false,
    meta: {
      name: undefined,
      description: undefined,
      ogType: undefined,
      ogSiteName: false,
      ogTitle: false,
      ogDescription: false,
      mobileApp: false,
      mobileAppIOS: undefined,
      appleStatusBarStyle: undefined,
      ogImage: false,
      ogHost: false,
      ogUrl: false,
      nativeUI: false,
      favicon: undefined,
      icons: undefined
    },
  },

  router: {
    middleware: ['auth'],
    fallback: true
  },

  auth: {
    strategies: {
      'laravelJWT': {
        provider: 'laravel/jwt',
        url: process.env.API_URL,
        token: {
          property: 'access_token',
          maxAge: 60 * 60
        },
        refreshToken: {
          maxAge: 20160 * 60
        },
      },
    }
  },

  axios: {
    baseURL: process.env.API_URL,
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extend(config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      }
    }
  },
}

来自生产服务器的 apache2 vhost 配置:

    DocumentRoot /var/www/secret/dist

    <Directory /var/www/secret/dist>
        Options -Indexes
        AllowOverride all
        Order allow,deny
        allow from all
    </Directory>

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]


你知道如何解决这个问题吗?我错过了什么吗? 谢谢!

【问题讨论】:

  • 你有这个的 Github 链接吗?它在本地工作吗?
  • 当我测试它时它在本地完美运行:yarn run start 我只在我的生产服务器上遇到这个问题,但我承认我不明白。我不能让你直接访问代码,这是一个在专业环境中完成的私人项目。感谢您的帮助
  • 它应该是yarn start(它是npm run start tho)。此外,如果它工作正常,这不是 IMO 的 Nuxt 问题。您是否尝试在 Heroku 上启动您的应用程序以进行调试?我不是 Nginx 专业人士,但我认为问题来自这里。在 Heroku 上,你不需要处理这种事情。试试看!

标签: vue.js vuejs2 nuxt.js single-page-application progressive-web-apps


【解决方案1】:

我终于找到了解决办法,实际上是vhost中的重写规则不能正常工作。通过使用此配置直接在我的应用程序的根目录创建一个 .htaccess,它可以正常工作:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-01-10
    • 2020-12-01
    • 2015-04-21
    • 1970-01-01
    • 2017-05-02
    • 2016-10-01
    • 2019-02-08
    • 2014-04-07
    相关资源
    最近更新 更多