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中，我似乎遇到了一些问题。运行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作为节点应用程序运行而导致的，该应用程序无法理解出现在我的nuxt配置中的ES6导入语句。

所以我不得不重写一些东西才能与commons.js一起使用（必需）。

目前可以使用。（在启动server.js时，我也曾尝试运行babel-node，但没有成功。这并不意味着它没有用，我只是不愿意再努力）。

感谢您的评论。欢呼

在https上本地运行nuxt – nuxt.config.js问题

1 个答案: