在https上本地運行nuxt – nuxt.config.js問題

Question

我正在嘗試使用https在本地運行nuxt來測試一些地理位置信息。 （ https://nuxtjs.org/ ， https://nuxtjs.org/api/nuxt ）

我正在關注本教程： https : //www.mattshull.com/blog/https-on-localhost

然后我發現了這個： https : //github.com/nuxt/nuxt.js/issues/146

這兩個鏈接似乎都很好地描述了如何以編程方式在server.js中運行nuxt。

問題是在我的nuxt.config.js中，我似乎遇到了一些問題。 運行runnung yarn dev時出現以下錯誤：

/Users/USER/Documents/github/mynuxtrepo/nuxt.config.js:2
import { module } from 'npmmodule'

> SyntaxError: Unexpected token {

在我的nuxt配置中，我導入一個自定義幫助程序以生成本地化路由。 它的作用並不重要，但顯然不能處理導入語法。 我認為節點版本不了解。

那么如何使它運行呢？ 我是否需要所有內容而不是導入？ 還是我的假設是錯誤的，原因完全不同？

謝謝您的幫助。

------編輯1：我的nuxt配置如下所示：

// eslint-disable-next-line prettier/prettier
import { generateLocalizedRoutes, generateRoutesFromData } from 'vuecid-helpers'
import config from './config'

// TODO: Add your post types
const postTypes = [{ type: 'pages' }, { type: 'posts', paginated: true }]

// TODO: Add your site title
const siteTitle = 'Title'
const shortTitle = 'short title'
const siteDescription = 'Page demonstrated with a wonderful example'
const themeColor = '#ffffff'
// TODO: Replace favicon source file in /static/icon.png (512px x 512px)
// eslint-disable-next-line prettier/prettier
const iconSizes = [32, 57, 60, 72, 76, 144, 120, 144, 152, 167, 180, 192, 512]

module.exports = {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: 'Loading…',
    htmlAttrs: {
      lang: config.env.DEFAULTLANG,
      dir: 'ltr' // define directionality of text globally
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },

      // TODO: Check this info
      { name: 'author', content: 'Author' },
      { name: 'theme-color', content: themeColor },

      // TODO: Add or remove google-site-verification
      {
        name: 'google-site-verification',
        content: '...W1GdU'
      }
    ],
    link: []
  },

  /*
  ** env: lets you create environment variables that will be shared for the client and server-side.
  */
  env: config.env,

  /*
  ** Customize the progress-bar color
  ** TODO: Set your desired loading bar color
  */
  loading: { color: '#0000ff' },

  /*
  ** CSS
  */
  css: ['@/assets/css/main.scss'],

  /*
  ** Plugins
  */
  plugins: [
    { src: '~/plugins/global.js' },
    { src: '~/plugins/throwNuxtError.js' },
    { src: '~/plugins/axios' },
    { src: '~/plugins/whatinput.js', ssr: false },
    { src: '~/plugins/i18n.js', injectAs: 'i18n' },
    { src: '~/plugins/vuex-router-sync' },
    { src: '~/plugins/vue-bows' },
    { src: '~/plugins/vue-breakpoint-component', ssr: false }
  ],

  /*
  ** Modules
  */
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/sitemap',
    [
      '@nuxtjs/pwa',
      {
        icon: {
          sizes: iconSizes
        },
        // Override certain meta tags
        meta: {
          viewport: 'width=device-width, initial-scale=1',
          favicon: true // Generates only apple-touch-icon
        },
        manifest: {
          name: siteTitle,
          lang: config.env.DEFAULTLANG,
          dir: 'ltr',
          short_name: shortTitle,
          theme_color: themeColor,
          start_url: '/',
          display: 'standalone',
          background_color: '#fff',
          description: siteDescription
        }
      }
    ]
  ],

  /*
  ** Workbox config
  */
  workbox: {
    config: {
      debug: false,
      cacheId: siteTitle
    }
  },

  /*
  ** Axios config
  */
  axios: {
    baseURL: '/'
  },

  /*
  ** Generate
  */
  generate: {
    subFolders: true,
    routes: [
      ...generateRoutesFromData({
        langs: config.env.LANGS,
        postTypes: postTypes,
        dataPath: '../../../../../static/data',
        bundle: 'basic',
        homeSlug: config.env.HOMESLUG,
        errorPrefix: config.env.ERROR_PREFIX
      })
    ]
  },

  /*
  ** Build configuration
  */
  build: {
    extend(config, { isDev, isClient }) {
      /*
      ** Run ESLINT on save
      */
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },

  /*
  ** Router
  */
  router: {
    linkActiveClass: 'is-active',
    linkExactActiveClass: 'is-active-exact',
    middleware: ['i18n'],
    extendRoutes(routes) {
      // extends basic routes (based on your files/folders in pages directory) with i18n locales (from our config.js)
      const newRoutes = generateLocalizedRoutes({
        baseRoutes: routes,
        defaultLang: config.env.DEFAULTLANG,
        langs: config.env.LANGS,
        routesAliases: config.routesAliases
      })

      // Clear array
      routes.splice(0, routes.length)

      // Push newly created routes
      routes.push(...newRoutes)
    }
  },

  /*
  ** Sitemap Configuration
  */
  sitemap: {
    path: '/sitemap.xml',
    hostname: config.env.FRONTENDURLPRODUCTION,
    cacheTime: 1000 * 60 * 15,
    generate: true,
    routes: [
      ...generateRoutesFromData({
        langs: config.env.LANGS,
        postTypes: postTypes,
        dataPath: '../../../../../static/data',
        bundle: 'basic',
        homeSlug: config.env.HOMESLUG,
        errorPrefix: config.env.ERROR_PREFIX
      })
    ]
  }
}

您可以看到， generateLocalizedRoutes和generateRoutesFromData方法用於生成本地化路由，並且還使用post json文件從數據（ :slug ）生成路由。

---------編輯2：我最終讓它運行。 我必須在nuxt.config.js中要求所有部分，而不是導入它們。 我還解決了證書問題。 所以我覺得這很酷。

但！！！ 🚧：然后我發現我的帖子模板中使用了我的配置文件。 所以我想我也需要模板中的文件：像const config = require('~/config') 。 但是然后我會得到這個錯誤：

[nuxt]初始化應用程序TypeError時出錯：““導出”為只讀“

經過一些研究，我發現在項目中使用common.js require和module.exports以及ES6導入/導出時，這可能是一件事情。 （可能鏈接到： https : //github.com/FranckFreiburger/vue-pdf/issues/1 ）。

那么，當以編程方式（使用require）運行nuxt時，又在我的應用程序中運行時，如何仍可以使用config.js？

我很高興聽到關於此的任何想法。

Answer 1

好吧，僅此結束：我的問題是由於將nuxt作為節點應用程序運行而導致的，該應用程序無法理解ES6導入語句，該語句出現在我的nuxt配置中。

所以我不得不重寫一些東西才能與commons.js一起使用（要求）。

現在可以使用。 （在啟動server.js時，我也嘗試運行babel-node ，但沒有成功。這並不意味着這行不通，我只是不願意再努力）。

感謝您的評論。 干杯