如何将 Javascript 文件导入 Nuxt.js答案

【问题标题】：How to import a Javascript file to Nuxt.js如何将 Javascript 文件导入 Nuxt.js
【发布时间】：2017-12-04 23:25:06
【问题描述】：

我正在尝试将以下 javascript 文件从网站模板导入我的项目。我不确定问题出在哪里。

我有兴趣将此网站模板转换为 nuxt.js 项目。

据我所知，我需要添加

plugins: [ '~plugins/axios', '~plugins/script.js', '~plugins/core.min.js', '~plugins/html5shiv.min.js', '~plugins/pointer-events.min.js', ],

到 nuxt.config.js 文件。

项目编译完美，但出现以下错误：

Nuxt.js Error:

ReferenceError: navigator is not defined

at Object.module.exports.Object.defineProperty.value (plugins/script.js:8:16)
at __webpack_require__ (webpack:/webpack/bootstrap f7e9adeb2d4cb66ad75c:25:0)
at Object.<anonymous> (.nuxt/index.js:27:14)
at __webpack_require__ (webpack:/webpack/bootstrap f7e9adeb2d4cb66ad75c:25:0)
at Object.<anonymous> (server-bundle.js:1366:65)
at __webpack_require__ (webpack:/webpack/bootstrap f7e9adeb2d4cb66ad75c:25:0)
at server-bundle.js:95:18
at Object.<anonymous> (server-bundle.js:98:10)
at evaluateModule (/Users/---/------/projects/---/website-try4/website/node_modules/vue-server-renderer/build.js:5820:21)
at /Users/-----/------/projects/-----/website-try4/website/node_modules/vue-server-renderer/build.js:5878:18
at /Users/-----/----/projects/-----/website-try4/website/node_modules/vue-server-renderer/build.js:5870:14
at Nuxt.renderToString (/Users/----/---/projects/----/website-try4/website/node_modules/vue-server-renderer/build.js:6022:9)
at P (/Users/---/---/projects/---/website-try4/website/node_modules/pify/index.js:49:6)
at Nuxt.<anonymous> (/Users/---/---/projects/---/website-try4/website/node_modules/pify/index.js:11:9)
at Nuxt.ret [as renderToString] (/Users/--/---/projects/---/website-try4/website/node_modules/pify/index.js:72:32)
at Nuxt._callee2$ (/Users/---/---/projects/---/website-try4/website/node_modules/nuxt/dist/nuxt.js:2076:25)`

如果您需要，我可以提供更多信息。

我还应该做什么才能正确导入这些 Javascript 文件？

非常感谢

【问题讨论】：

标签： javascript node.js webpack nuxt.js

【解决方案1】：

并非所有 javascript 文件都应通过 nuxt.config.js 中的插件包含。
只有 Vue 插件应该。

您得到的错误是因为您想在服务器上执行客户端代码，而 NodeJS（与浏览器不同）没有导航器属性。

要解决这个问题：
尝试仅在需要的地方使用 axios（通过导入或要求）
示例：
https://nuxtjs.org/guide/routing#middleware

将其他脚本放在您的头部或 app.html 中的 body 标签底部 https://nuxtjs.org/guide/views#document

要扩展 html 模板，请在项目的根目录下创建一个 app.html。默认模板为：

 <!DOCTYPE html>
  <html {{ HTML_ATTRS }}>
    <head>
        {{ HEAD }}
    </head>
    <body {{ BODY_ATTRS }}>
      {{ APP }}
    </body>
  </html>

【讨论】：