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

Posted

技术标签:

【中文标题】在本地 https 上运行 nuxt – nuxt.config.js 的问题【英文标题】：Run nuxt on https locally – problem with nuxt.config.js 【发布时间】：2019-06-13 16:01:18 【问题描述】：

我正在尝试使用 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 配置中，我导入了一个自定义助手来生成本地化路由。它的作用并不重要，但显然它无法处理导入语法。 我假设node版本看不懂。

那么我怎样才能让它运行呢？我是否必须要求所有内容而不是导入？ 还是我的假设是错误的，原因完全不同？

感谢您的帮助 干杯。

------ 编辑 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', s-s-r: false ,
     src: '~/plugins/i18n.js', injectAs: 'i18n' ,
     src: '~/plugins/vuex-router-sync' ,
     src: '~/plugins/vue-bows' ,
     src: '~/plugins/vue-breakpoint-component', s-s-r: 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: ""exports" is read-only"

经过一番研究，我发现这可能是在我的项目中使用 common.js require 和 module.exports 以及 ES6 导入/导出时发生的事情。 （可能链接到：https://github.com/FranckFreiburger/vue-pdf/issues/1）。

那么，在以编程方式（使用 require）运行 nuxt 时，我怎么还能使用我的 config.js，然后在我的应用程序中运行呢？

我很高兴听到对此的任何想法... 干杯

【问题讨论】：

显示整个nuxt.config.js 什么nuxt版本？ @Aldarund 最新 nuxt 版本：2.3.4 @Styx 我编辑了我的问题并添加了我的 nuxt 配置 我还尝试将 dev: (process.env.NODE_ENV !== 'production') 添加到我的 nuxt.config.js 中，如此处所示，但没有成功：nuxtjs.org/api/configuration-dev#the-dev-property 【参考方案1】：

好吧，只是为了关闭这个： 我的问题是由于将 nuxt 作为节点应用程序运行，它不理解 ES6 导入语句，这些语句出现在我的 nuxt 配置中。

所以我不得不重写一些东西来使用 commons.js（需要）。

这暂时有效。 （我也尝试在启动 server.js 时运行babel-node，但没有成功。并不意味着这不起作用，我只是不想更努力地尝试）。

感谢 cmets。 干杯

【讨论】：

以上是关于在本地 https 上运行 nuxt – nuxt.config.js 的问题的主要内容，如果未能解决你的问题，请参考以下文章

nuxt项目修改本地运行的端口

nuxt项目修改本地运行的端口

pm2下如何运行nuxt？

nuxt.js 服务端部署

k8s 部署 nuxt 项目

Nuxt：显示静态文件夹中的本地图像