Windows7+内网， 安装高版本nodejs，使用vite+vue3+typescript开发项目

已于 2023-08-02 14:45:17 修改
阅读量2.1k 收藏 9
点赞数
文章标签： 前端 vue windows node.js
于 2023-08-01 10:39:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43842567/article/details/132036349
版权

        前言：vite只支持高版本的nodejs，而高版本的nodejs只支持windows8及以上，且vite还对浏览器版本有兼容问题。以下均为vite官网截图

 1、安装好低版本的nodejs

        win7系统建议安装13.及以下，我的是12.12.0这个版本。nodejs低版本官网下载地址

Index of /download/release/v12.12.0/

        进入下载地址，根据自己的电脑是32位还是64位去下载对应的.msi文件，然后导到内网运行安装即可。安装完成之后，我的nodejs文件夹是在C盘——program files下

        打开cmd,查看node版本，命令行：node -v。显示出版本代表安装成功

2、下载高版本的nodejs压缩包

        我下载的是16.1.0这个版本，下载地址

Index of /download/release/v16.1.0/

        根据自己的电脑是32位还是64位去下载对应的.zip压缩包，然后导到内网

 3、用步骤2解压后的高版本node包文件替换步骤1里nodejs文件夹里的所有文件

        这一步可以参考这位博主的步骤

vite安装报错 windows7问题解决方法_win7 vite_梅坞茶坊的博客-CSDN博客

        

        文件替换完成后，要新增系统变量：NODE_SKIP_PLATFORM_CHECK  值：1；不然win7会检测到node版本过高提示该版本只适用于win8及以上。步骤：计算机——右键单击，属性——高级系统设置——环境变量——新增系统变量

   4、谷歌浏览器版本要升级到87及以上

   5、如果编辑器用的webstorm的小伙伴，记得同步升级一下编辑器哦，不然写代码的时候会很难受，到处都是波浪线

shmily...
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs...一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
在线商城项目（整套源码），使用vue2+element ul+nodejs+mysql技术实现
08-24
适合大学实训项目、以及新手进阶拿来练手的一个商城系统项目，该项目主要采用vue2+elementui实现前端布局与实现，后端采用nodejs+mysql来实现商品信息存储和用户信息存储。 能学到什么：1、使用vue2cli项目部署的...
Vue2（七）：超详细vue开发环境搭建（win7），nodejs下载与安装，安装淘宝镜像（报错已解决），配置脚手架
m0_73560798的博客
03-19 1976
本来想粗略写一下的，但是搭建脚手架的时候，遇到了很多问题，浪费快两天时间，记录一下自己的解决办法希望对你们有帮助！
前端构建工具 Vite
两个月亮
02-09 1181
Vite 采用了与 Webpack 截然不同 unbundle 机制。Vite 在将项目打包到生产环境时，使用的工具是 Rollup。因此，Vite 相比于 Webpack 的优势主要体现在开发阶段。Vite 使用原生 ESM 文件，无需打包，可以更快速的为客户提供服务。
vite：初始项目安装搭建
最新发布
qq_40358970的博客
05-16 545
Vite是一个前端的构建工具，相较于Webpack，Vite使用了不同的运行方式：开发时并不对项目进行打包，而是直接采用ESM（ES模块）的方式来运行项目，在项目部署时再进行打包。因此，Vite的执行速度相较于Webpack快了许多，操作起来也比Webpack更加方便。在Windows上安装Node.js后（Node.js是Vite的运行环境），你可以通过npm（Node包管理器）来安装Vite项目。你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。
vite安装报错 windows7问题解决方法
qq_32421489的博客
10-11 2236
vite安装报错 windows7问题解决方法
vue3—win7搭建vue3环境
yangchangfu2016的博客
05-06 529
本文主要介绍window7环境下搭建vue3开发环境，旨在减轻小伙伴们学习vue3入门难度，希望帮到大家！
【Vue】全家桶之Vite
指错||纠正||建议||水评+点赞&&评论&&关注&&转发，在这里你大概率会有所收获
08-24 593
Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。
使用Vite搭建Vue3 + Ts项目
weixin_41897680的博客
03-11 7590
使用Vite搭建Vue3 + Ts项目
Vite、Pinia 新一代项目工程化
subsistent的博客
01-27 1558
安装vue-router 4.x配置路由引入路由 main.js安装vuex 4.x配置 Store引入状态管理 main.js安装依赖完整引入按需引入手动导入。
VUE ---- Windows7环境下安装
LizequaNNN的博客
01-11 4959
VUE ---- Windows7环境下安装 一、检查Nodejs版本 最新的Nodejs版本需要系统环境为Windows8以上，所以我们安装的时候需要选择相对较低的版本。Windows7支持最高版本的Nodejs为Nodejs@13.14.0以下，此版本以上就要求Windows8以上的系统。 由于脚手架工具Vue-cli官方对于Nodejs的版本要求为v8.9 或更高版本 (推荐 v10 以上)，所以我们先自查一下系统上的Nodejs版本。 node -v 这里安装的版本是@13.9.0 。这里也
【vue3】构建vite项目
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
08-28 1153
1.1下载安装后使用npm -v查看是否安装成功1.2 nvm针对node版本惊醒管理的工具。
win7系统为搭建vue3环境安装高版本nodejs和pnpm踩的坑
壹壹得贰的博客
03-06 1425
7、网上下载node19.9的64位zip版，解压后直接拷贝覆盖到升级后的16.3.0 NodeJs安装目录下，方法同上，直接覆盖。8、此时将nodejs 16.3.0文件夹里的npm文件复制到nodejs安装目录下的node_modules文件下，直接覆盖npm文件夹。（2）默认安装 ，安装成功 cmd命令行 输入node -v 和 npm -v 查看版本，能看到版本信息证明安装成功。12、检查环境变量中是否有上图中的路径，若没有，把上图中pnpm.cmd所在路径复制下来，增加到环境变量path中。
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip
03-03
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip 二、项目内容 项目包括：图文、音频、视频、电子书、用户、直播、问答社区、考试、拼团秒杀、优惠券模块及微信扫码支付以及（部分）...
基于vue+node.js+mysql的网站商城
06-01
所用技术：vue全家桶、vueRouter、Element UI、Axios、js、Node.js、Express、Mysql 实现功能：首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等
使用vue-cli3+typescript的项目模板创建工程的教程
11-21
注:Vue CLI 3需要 nodeJs ≥ 8.9 安装 cnpm install -g @vue/cli 创建项目(以下只说明用vue ui图形化界面导入配置好的demo) vue ui 打开脚手架的图形化界面,进到到demo目录,导入(提示没有依赖,选择仍然导入即可) ...
vue3及vite搭建环境
weixin_56817537的博客
08-15 943
vue3及vite搭建环境
使用vite创建一个自己的前端开发sdk包
jack19982101的博客
12-14 2939
使用vite创建一个自己的前端开发SDK包
这是一份保姆级Vue3+Vite实战教程
热门推荐
很多时候犯错都是在不知情的情况下发生的
02-12 1万+
ESLint 不仅能够检测代码中的错误，而且在许多情况下，可以为我们自动纠正错误。如上，这是我电脑 nrm 管理的镜像源列表，最后一个是我公司内网的所以打码了，除了最后一个都是安装 nrm 自带的，你可以使用 nrm use 命令很方便的去切换源，npm 默认就是列表中名为 npm 的源，如果你下载不下来一些工具，可以切换为 taobao 源，当然安装完成后最好切回来，因为除了 npm 源，其他源在下载某些包时，都可能会出现一些莫名的问题。
将nodejs+express+vue3+vite发布到阿里云上
07-17
要将Node.js + Express + Vue3 + Vite应用程序部署到阿里云上，您可以按照以下步骤进行操作： 1. 在阿里云上创建一个ECS实例，选择适合您需求的操作系统和配置。确保您在安全组中打开了HTTP（80端口）和HTTPS（443端口）的访问权限。 2. 在本地开发环境中构建Vue3应用程序。在项目根目录下打开终端或命令提示符，运行以下命令： ```bash npm run build ``` 这将使用Vite构建工具编译和打包Vue3应用程序，并将生成的静态文件保存在`dist`目录中。 3. 将Vue3应用程序的静态文件上传到阿里云ECS实例。您可以使用FTP工具（如FileZilla）将`dist`目录中的文件上传到ECS实例的`/var/www/html`目录（或您自定义的web目录）。 4. 在ECS实例上安装Node.js和npm。您可以通过SSH远程连接到ECS实例并使用以下命令安装它们： ```bash # 安装Node.js curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - sudo apt-get install -y nodejs # 安装npm sudo apt-get install -y npm ``` 5. 在ECS实例上创建一个名为`server.js`的文件，并添加以下内容： ```javascript const express = require('express'); const path = require('path'); const app = express(); // 静态文件托管 app.use(express.static(path.join(__dirname, 'html'))); // 所有路由重定向到index.html app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'html', 'index.html')); }); // 启动服务器 const port = process.env.PORT || 80; app.listen(port, () => { console.log(`Server is running on port ${port}`); }); ``` 在上述示例中，我们使用Express创建了一个简单的服务器。我们通过`express.static`中间件来托管上传的Vue3应用程序的静态文件，然后将所有路由重定向到`index.html`以支持Vue的单页应用。最后，我们使用`app.listen`方法来启动服务器，并指定端口号为80。 6. 在ECS实例上运行以下命令来安装Express和其他项目依赖： ```bash npm install express ``` 7. 在ECS实例上运行以下命令启动Express服务器： ```bash node server.js ``` 这将在ECS实例上启动Express服务器，并监听端口80。 8. 现在，您的Node.js + Express + Vue3 + Vite应用程序已经在阿里云ECS实例上运行起来了。您可以在浏览器中访问ECS实例的公网IP地址来查看应用程序。 请注意，上述示例仅提供了一个简单的部署流程，并且假设您已经完成了阿里云ECS实例的设置和配置。在实际部署过程中，您可能还需要考虑安全性、性能优化、域名绑定等方面的问题。另外，您可能还需要使用Nginx等工具来配置反向代理或实现负载均衡等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值