我正在尝试使用 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
这两个链接似乎都很好地描述了如何使用服务器运行nuxt.js以编程方式。
问题是在我的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] 初始化应用程序时出错 类型错误："导出"是只读的">
经过一些研究，我发现在我的项目中使用common.js require和module.export以及ES6导入/导出时，这可能是一件事。(可能链接到：https://github.com/FranckFreiburger/vue-pdf/issues/1)。
那么我怎么还能使用我的配置.js以编程方式(使用 require)运行时，然后在我的应用程序中运行 nuxt？
我很高兴听到对此的任何想法... 干杯
好吧，只是为了关闭它： 我的问题是由于将nuxt作为节点应用程序运行而引起的，该应用程序不理解出现在我的nuxt配置中的ES6导入语句。
所以我不得不重写一些东西才能与公共资源一起使用.js(require)。
这目前有效。 (我也尝试在启动服务器时运行babel-node.js，但没有成功。这并不意味着这不起作用，我只是不热衷于更努力)。
感谢您的评论。 干杯