简体   繁体   English

如何将Javascript文件导入Nuxt.js

[英]How to import a Javascript file to Nuxt.js

Im trying to import the following javascript files from a website template to my project. 我正在尝试将以下javascript文件从网站模板导入到我的项目中。 Im not sure where the problem lies. 我不确定问题出在哪里。

Im interested to convert this website template to a nuxt.js project. 我有兴趣将此网站模板转换为nuxt.js项目。

From what i could gather i need to add 从我可以收集的信息中,我需要添加

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

to the nuxt.config.js file. nuxt.config.js文件。

The projects compiles perfectly but i get the following error: 这些项目可以完美地编译,但是出现以下错误:

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)`

I can provide more information if you need. 如果您需要,我可以提供更多信息。

What else should I be doing to import these Javascript files properly? 我还应该怎么做才能正确导入这些Javascript文件?

Thanks a bunch 谢谢一大堆

Not all javascript files should be included through plugins in the nuxt.config.js. 并非所有的javascript文件都应该通过nuxt.config.js中的插件包含在内。
Only Vue plugins should. 仅Vue插件应如此。

The error you get is because you want to execute client side code on the server and NodeJS (unlike a browser) doesn't have a navigator property. 您收到的错误是因为您要在服务器上执行客户端代码,而NodeJS(与浏览器不同)没有navigator属性。

To fix this: 要解决此问题:
Try to use axios only on places you need it (through an import or require) 尝试仅在需要的地方使用axios(通过导入或要求)
example: 例:
https://nuxtjs.org/guide/routing#middleware https://nuxtjs.org/guide/routing#middleware

Put the other scripts in your head or at the bottom of your body tag in the app.html https://nuxtjs.org/guide/views#document 将其他脚本放在app.html https://nuxtjs.org/guide/views#document的头部或正文标签的底部

To extend the html template, create a app.html at the root of your project. 要扩展html模板,请在项目的根目录下创建一个app.html。 The default template is: 默认模板是:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM