node升级后,vue启动报错

node升级后,vue启动报错,第1张

上来就干货!

node56升级到10,重新启动vue报错误

仔细看大概就是:

 Node Sass could not find a binding for your current environment: Windows 64-bit with Nodejs 10x

Found bindings for the following environments:

  - Windows 64-bit with Nodejs 8x

This usually happens because your environment has changed since running `npm install`

后面也有告诉怎么解决:Run `npm rebuild node-sass` to download the binding for your current environment

所以复制命令:npm rebuild node-sass  回车,等待,重新启动就可以了

一、JavaScript

传统的JavaScript是运行在浏览器上的,因为浏览器的内核分为两个部分

二、什么是Nodejs

Nodejs 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,运行在服务端的JavaScript。Nodejs 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

综上所述,vuejs 是通过 webpack来打包,而webpack 又基于 npm, npm需要nodejs环境。这就是为什么vuejs 还需要安装nodejs环境。

目标dist文件夹拷贝到一台未安装nodejs的 nginx服务器上,访问页面可以正常响应逻辑。这时跟nodejs没有任何关系,服务器又不是nodejs在担当,而是nginx。如果你用nodejs来部署服务器,则需要在目标机上安装nodejs

简单的说:你既可以开发nodejs的服务程序,亦可以用基于nodejs的npm && webpack来打包 目标前端页面。vuejs 使用webpack来打包,故而需要nodejs环境。

参考文章

看了下网上的解释,一般都是将介绍vuejs的文本与node js的文本 贴过来, 再解释说 前者是前端开发框架,后者是js的运行环境,可以以js开发后台服务器。似乎没有说到点子上。

我的理解是

1 nodejs是一个很强大的js 运行环境,类似于jvm之于java。因此对js的支持非常好,催生了基于js的一系列应用开发。源于各js的应用的成长壮大,继而催生出了 npm

2 NPM是基于node js环境的一个包管理器。试问 为什么单纯的 jsp/php里面没有NPM?因为没有一个类似于nodejs的强大的js运行环境的支撑。由于nodejs 催生了js的兴盛,又进而催生出NPM来打包管理这些基于js的应用

3 随着前端开发的网页元素不断丰富和复杂化,催生出webpack 来进一步规划js应用的打包部署。前端目标页面资源,通过webpack来打包压缩出来。

4 可以看出vuejs 就是遵循的webpack 的方式来部署的,我们使用npm run build之后,会生成一个目标dist文件。这即是目标静态web资源,放在nginx下面即可通过网页访问。

综上所述,vuejs 是通过 webpack来打包,而webpack 又基于 npm, npm需要nodejs环境。这就是为什么vuejs 还需要安装nodejs环境。

将目标dist文件夹拷贝到一台未安装nodejs的 nginx服务器上,访问页面可以正常响应逻辑。这时跟nodejs没有任何关系,服务器又不是nodejs在担当,而是nginx。如果你用nodejs来部署服务器,则需要在目标机上安装nodejs

简单的说:你既可以开发nodejs的服务程序,亦可以用基于nodejs的npm && webpack来打包 目标前端页面。vuejs 使用webpack来打包,故而需要nodejs环境。

前端项目运行时,如果经常运行慢,崩溃停止服务,报如下错误:
原因:

因为在 Node 中,通过JavaScript使用内存时只能使用部分内存(64位系统:14 GB,32位系统:07 GB),这个时候,如果前端项目非常的庞大,Webpack编译时就会占用很多的系统资源,如果超出了V8引擎对Node默认的内存限制大小时,就会产生内存溢出的错误。

LIMIT是你想分配的内存大小,这里的8192单位是M也就是8G,大小可根据情况而定。

但是这时候,重新启动会报错,如图:

在项目的 node_modules/bin 文件下找到所以的 cmd 文件,"%_prog%" 去掉 双引号 %_prog%

可在 node_modules 同级下,写一个fix-memory-limitconfigjs文件进行批次处理。

// 运行项目前通过node执行此脚本 (此脚本与 node_modules 目录同级)
const fs = require('fs')

const path = require('path')

const wfPath = pathresolve(__dirname, '/node_modules/bin')

fsreaddir(wfPath, (err, files) => {

  if (err) {

    consolelog(err)

  } else {

    if (fileslength != 0) {

      filesforEach(item => {

        if (itemsplit('')[1] === 'cmd') {

          replaceStr(`${wfPath}/${item}`, /"%_prog%"/, '%_prog%')

        }

      })

    }

  }

})

// 参数:[文件路径、 需要修改的字符串、修改后的字符串] (替换对应文件内字符串的公共函数)

function replaceStr(filePath, sourceRegx, targetSrt) {

  fsreadFile(filePath, (err, data) => {

    if (err) {

      consolelog(err)

    } else {

      let str = datatoString()

      str = strreplace(sourceRegx, targetSrt)

      fswriteFile(filePath, str, err => {

        consolelog(err)

      })

    }

  })

}

然后修改 packagejson里的 script里的语句

先处理内存溢出问题,然后再执行js,进行替换

&& 运算符,(相继执行,只有前一个执行成功才会执行下一个)


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/13451096.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-08-09
下一篇 2023-08-09

发表评论

登录后才能评论

评论列表(0条)

保存