XP系统安装Node.js v8.6.0并搭建Vue2开发环境(项目兼容到Vista的IE9浏览器)

news2025/2/26 1:34:16

下载并安装Node.js v8.6.0

通常我们开发Vue2项目,是通过vue create命令建立Vue2工程,用npm run serve命令启动Vue2网站的。
vue命令是用JavaScript写的,不是用C语言写的,必须要Node.js环境才能运行,由Node.js自带的npm软件包管理器通过npm install -g @vue/cli命令安装 。然而,即使是安装vue-cli的最低版本v3,也至少需要Node.js v8.9的环境。Node.js官网发布的最后一个支持XP和Vista系统的Node.js版本是v5.12.0,这个版本远远不够,如下图所示,在这上面直接用npm install -g @vue/cli@3命令安装vue-cli会失败。

虽然Node.js官方从v6.0版本开始就不再支持XP和Vista系统, 不过在2021年的时候,有聪明的网友就发现了跳过系统检查后实际上node v6是可以在xp上运行的。最终他不仅成功编译出了v6版本,还成功编译了v8.6.0版本。虽然v8.9.4版本编译失败了,但是v8.6.0版本已经够用了,足够我们用来搭建vue2脚手架了。
此项目的网址是:https://github.com/hlizard/node8-xp
v8.6.0 for XP版本的msi安装包的下载地址是:https://github.com/hlizard/node8-xp/releases/download/v8.6.0-xp/node-v8.6.0-xp-x86.msi

下载下来之后还是以正常的方式安装,安装完成后我们也能用node -v命令看到安装的确实是8.6.0版本。

安装vue-cli软件包并建立vue2工程

在Node.js命令行窗口中执行npm install -g @vue/cli@3命令安装vue-cli软件包。之前Node.js 5.12环境下安装不成功,这回在Node.js 8.6环境下就可以安装成功了。

不过,vue-cli安装完毕后我们会发现vue create my-project命令无法运行。

D:\Code\Vue>vue create my-project
You are using Node v8.6.0, but this version of vue-cli requires Node >=8.9.
Please upgrade your Node version.

这里需要一点小小的修改,打开C:\Documents and Settings\你的用户名\Application Data\npm\node_modules\@vue\cli\bin\vue.js文件,注释掉里面的process.exit(1)语句并保存。

修改完后用vue create my-project命令就可以成功创建vue2工程了,创建工程时我们直接选择默认的default (babel, eslint)选项即可。

工程创建完成后cd到my-project文件夹里面去,执行npm run serve就可以启动http服务器,然后用firefox52.9esr、opera36或chrome49浏览器访问创建出来的vue2网站。 

IE8因为不支持ECMAScript5的Object.defineProperty()方法,打开网页后白屏,这个无解。

从package.json里面可以看到当前使用的vue的版本号是2.6.10。

兼容Windows 7的IE11浏览器

Windows 7能安装的最高IE浏览器版本是IE11。用vue-cli3创建的vue2工程默认是不兼容IE11浏览器的,用IE11打开网站后会白屏。
Windows 7的IE11浏览器配合Aero效果,界面是非常漂亮的,如果我们的网站不兼容IE11,那真是太可惜了!

我们可以在IE11的F12 Developer Tools里面看到是sockjs-client模块报了语法错误,这是一个很重要的线索。

为了兼容漂亮的IE11,我们需要使用babel-polyfill库把项目里面的ECMAScript6语法翻译成IE11浏览器能够理解的ECMAScript5语法。

IE4是第一个支持ECMAScript1的浏览器。
IE5是第一个支持ECMAScript2的浏览器。
IE5.5是第一个支持ECMAScript3的浏览器。
IE9是第一个支持ECMAScript5的浏览器,但IE9不支持ECMAScript5的use strict。
IE10、Firefox21、Opera15、Chrome23和Safari6是第一批完全支持ECMAScript5的浏览器。
所有的IE浏览器都不支持ECMAScript6。
Firefox54、Opera55、Chrome58和Safari10是第一批完全支持ECMAScript6的浏览器。

在my-project目录下执行:npm install --save-dev babel-polyfill

修改src/main.js文件,在顶部加入import 'babel-polyfill'

修改babel.config.js文件(注意'@vue/app'的左边要加一个左方括号):

module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol',
        'es6.array.iterator',
        'es6.object.assign'
      ],
      useBuiltIns: 'entry'
    }]

  ]
}

在vue项目根目录(my-project)下创建vue.config.js文件,写上刚才报错的sockjs-client模块。完整内容如下:

module.exports = {
    transpileDependencies: ['sockjs-client']
}

然后npm run serve启动http服务器,IE11就能正常显示页面了。 

兼容Windows Vista的IE9浏览器

Windows Vista能安装的最高IE浏览器版本是IE9,这也是Vue2前端框架能兼容到的最低IE浏览器版本。
IE9同样是一款界面非常漂亮的浏览器,并且滚动条和表单控件没有像IE10和IE11那样扁平化。IE9不仅支持HTML5,还支持canvas绘图。
IE9在不打开F12调试工具的情况下,JavaScript里面的console对象为undefined,所以直接访问Vue2网页会白屏。

只有按F12键打开了调试工具,再刷新网页,console不为undefined了,页面才能正常显示。

解决办法当然就是在没有打开F12调试工具的时候定义空的console.log、console.warn……函数。
在my-project/public目录下新建一个ie9_console.js文件,内容为

(function () {
    var method
    var noop = function () {}
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
    ]
    var length = methods.length
    var console = (window.console = window.console || {})
    while (length--) {
        method = methods[length]
        if (!console[method]) {
            console[method] = noop
        }
    }
}())

再修改已有的my-project/public/index.html文件,在</title>下方加入
<script type="text/javascript" src="<%= BASE_URL %>ie9_console.js"></script>

保存文件后,不用重启http服务器就可以立即生效,IE9可以正常显示Vue2页面了。

Vista下的IE9窗口最大化后,标题栏是会变黑的哦~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1823843.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

自然语言处理:第三十五章Embedding 测评榜单MTEB

文章链接: [2210.07316] MTEB: Massive Text Embedding Benchmark (arxiv.org) 项目地址: mteb:MTEB: Massive Text Embedding Benchmark - GitCode github地址: FlagEmbedding/C_MTEB at master FlagOpen/FlagEmbedding (github.com) Hugging Face Leadboard: MTEB Leader…

基于springboot的城市垃圾分类管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于springboot的城市垃圾分类管理系统,…

家用RJ45水晶头可以用在工业互联网中?

工业互联网作为智能制造的核心组成部分&#xff0c;已经在工业领域快速发展。在建立连接不同设备和系统的复杂网络中&#xff0c;网络设备和连接器的选择变得至关重要。其中&#xff0c;普遍使用的RJ45水晶头和网线在家庭和小型商业网络中被广泛采用&#xff0c;但是否适用于工…

PostgreSQL基础(十四):PostgreSQL的数据迁移

文章目录 PostgreSQL的数据迁移 PostgreSQL的数据迁移 PostgreSQL做数据迁移的插件非常多&#xff0c;可以从MySQL迁移到PostgreSQL也可以基于其他数据源迁移到PostgreSQL。 这种迁移的插件很多&#xff0c;这里只说一个&#xff0c;pgloader&#xff08;非常方便&#xff0…

国内算力真的紧缺么?

苹果WWDC证实了一点&#xff1a;AI推理算力将长期处于“云端为主”的状态&#xff0c;这个“长期”至少是三到五年。对&#xff0c;苹果和OpenAI搞了一场大合作&#xff0c;打算把下一代iOS系统和ChatGPT混在一起。 这意味着未来三到五年&#xff0c;AI的推理大部分还得靠云端…

linux驱动学习(九)之中断

一、中断的实现 对于中断的请求&#xff0c;在linux内核中&#xff0c;有一套标准的接口函数&#xff0c;可以实现中断的响应和处理。 #include <linux/interrupt.h>//1 申请中断 static inline int __must_check request_irq(unsigned int irq, irq_handler_t handler…

vue自定义一个回到顶部组件

1.首先创建一个backTop.vue页面&#xff1a; 页面有两个按钮&#xff0c;一个回到顶部按钮&#xff0c;一个刷新按钮(showRefresh:false将刷新按钮隐藏)&#xff0c;实现效果如下&#xff1a; 代码解析&#xff1a; domName:需要监听滚动的dom类名&#xff0c;不传默认监听bod…

windows下open webui+ollama+sd webui

原文&#xff1a;https://wangguo.site/Blog/2024/Q2/2024-06-14/ 说明&#xff1a;安装使用环境是在Windows下 1、给ollama一个好看的交互界面&#xff08;open webui&#xff09; 1.1、ollama安装 安装&#xff1a;在ollama官网下载windows版本进行安装 模型列表&#xff1…

ChatGPT等大模型可以代替搜索引擎吗?

在知乎看到一个问题&#xff0c;回答了一下&#xff0c;分享到这里。 把ChatGPT当作搜索引擎可靠性差点&#xff0c;但是可行。 代替搜索引擎 1、写代码 我们可以让GPT写一段算法代码或者使用某个语言API的示例&#xff0c;然后只需要把这段代码粘贴到IDE中&#xff0c;简单…

Linux编辑器 vim使用 (解决普通用户无法进行sudo提权问题)

文章目录 一.vim是什么命令模式底行模式 二.关于vim暂停问题三.注释批量化注释批量化去注释 四.解决普通用户无法进行sudo提权问题五.vim的配置 一.vim是什么 用过VS的都知道&#xff0c;拥有着编辑器编译器调试.编写C&#xff0c;C&#xff0c;python等的功能。就是集成 Linu…

Git 基础操作(一)

Git 基础操作 配置Git 安装完Git后&#xff0c;首先要做的事情是设置你的 用户名 和 e-mail 地址。这样在你向仓库提交代码的时候&#xff0c;就知道是谁提交的&#xff0c;以及提交人的联系方式。 配置用户名和邮箱 使用git config [--global] user.name "你的名字&qu…

网络爬虫概述

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 网络爬虫&#xff08;又被称为网络蜘蛛、网络机器人&#xff0c;在某社区中经常被称为网页追逐者&#xff09;&#xff0c;可以按照指定的规则&#…

神经网络-万能近似定理的探索

神经网络-万能近似定理的探索 对于这个实验博主想说&#xff0c;其实真的很有必要去好好做一下&#xff0c;很重要的一个实验。 1.理论介绍 万能近似定理: ⼀个前馈神经⽹络如果具有线性层和⾄少⼀层具有 “挤压” 性质的激活函数&#xff08;如 sigmoid 等&#xff09;&…

基于Matlab的细胞计数图像处理系统(GUI界面有报告) 【含Matlab源码 MX_003期】

简介&#xff1a; 本文旨在解决生物血细胞数目统计的挑战&#xff0c;提出了基于图像处理的综合方案。通过MATLAB平台&#xff0c;我们设计并实现了一套完整的细胞图像处理与分析流程。在预处理阶段&#xff0c;采用图像增强和阈值分割等方法&#xff0c;有效地提高了细胞图像的…

Swift开发——输出格式化字符

Swift语言是开发iOS和macOS等Apple计算机和移动设备系统应用程序的官方语言。Swift语言是一种类型安全的语言,语法优美自然,其程序从main.swift文件开始执行,程序代码按先后顺序执行,同一个工程的程序文件中的类和函数直接被main.swift文件调用,除了main.swift文件外,工程…

【数据挖掘-思考】分类和聚类

将芝麻和花生分开&#xff0c;是一个分类问题还是聚类问题? 显而易见的&#xff0c;在日常生活中&#xff0c;这是一个分类问题&#xff0c;在数据挖掘领域中&#xff0c;是否也是这样呢&#xff1f; 通义千问的回答&#xff1a; 在数据挖掘中&#xff0c;将芝麻和花生分开可以…

【C语言】14. qsort 的底层与模拟实现

一、回调函数 回调函数就是⼀个通过函数指针调用的函数。 把函数的指针&#xff08;地址&#xff09;作为参数传递给另⼀个函数&#xff0c;当这个指针被用来调用其所指向的函数时&#xff0c;被调用的函数就是回调函数。回调函数不是由该函数的实现方直接调用&#xff0c;而是…

思维+暴力,CF992D - Nastya and a Game

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 992D - Nastya and a Game 二、解题报告 1、思路分析 这个题题目很吓人 因为看起来前缀和根本存不下&#xff0c;似乎没法算 这也提示我们似乎只需在小范围内枚举求解即可 题目的P / K SUM也保证了我们…

SQL中的UPDATE语句:别让你的数据“离家出走”

sql的update操作正式环境用的很少&#xff0c;但是在测试环境还是用的挺多的。 想象一下&#xff0c;你正在管理一个学校的数据库&#xff0c;其中有一个students表&#xff0c;记录着每个学生的信息。有一天&#xff0c;你接到通知说某个学生的年龄或成绩需要更新。这时&…