在https本地“nuxt.config.js的问题”上运行nuxt

我正在尝试用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中,我似乎遇到了一些问题。 运行时出现以下错误 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]初始化app typeerror时出错:“exports”是只读的

经过一些研究,我发现在我的项目中使用common.js require和module.exports以及ES6 import/export时,这可能是一件事情。(可能链接到: https://github.com/FranckFreiburger/vue-pdf/issues/1 )

那么,当以编程方式(使用require)运行nuxt,然后在应用程序中运行nuxt时,我如何仍然使用config.js呢?

我很高兴听到关于这个的任何想法… 干杯