服务器之家:专注于服务器技术及软件下载分享
分类导航

云服务器|WEB服务器|FTP服务器|邮件服务器|虚拟主机|服务器安全|DNS服务器|服务器知识|Nginx|IIS|Tomcat|

服务器之家 - 服务器技术 - IIS - Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

2024-01-05 11:02未知服务器之家 IIS

Vue环境的搭建   一.     背景 vue的运行方式有两种 一种是在页面引用vue的js包, 一种是搭建脚手架来vue框架. 我们在这里使用的是第二种方式. 需要安装的软件 npm 16.13.1 LTS 现在最新版已经20了, 建议下载LTSC版 下载地址: https://n

Vue环境的搭建

 

一.     背景

vue的运行方式有两种

一种是在页面引用vue的js包,

一种是搭建脚手架来vue框架.

我们在这里使用的是第二种方式. 需要安装的软件 npm 16.13.1 LTS

现在最新版已经20了, 建议下载LTSC版

下载地址:

https://nodejs.org/en/

 

二.     安装Node.js

点击node-v16.13.1-x64.msi,开始安装

 

在Welcome to the Node.js Setup Wizard 页面点击Next.

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

在”End-User License Agreement”点击”I accept the terms in the License Agreement”, 然后点击Next.

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

在”Destination Folder”页面选择安装路径, 这里是默认, 这个路劲要记住, 然后点击Next

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

在Custom Setup, 我这里选择默认, 然后点击Next

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

在Tools for Native Modules页面,勾选复选框,然后点击Next

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

在Ready to install Node.js页面点击Install进行安装

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

等待Node.js安装完成, 然后点击Finish

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

点击Finish之后会弹出一个新的CMD窗口, Install Additional Tools for Node.js, 点击任意键继续

Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS 

 

点击任意键继续

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

等待Windows PowerShell执行完成, 按键盘回车键退出

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

三.     在NPM中安装插件

1.   配置NPM

首先,先确认NPM安装完成,,以管理员身份打开CMD.然后在CMD窗口查看npm版本号

命令 cd C:\Program Files\nodejs

命令 node -v

命令 npm -v

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

 

修改npm的本地仓库:

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

查看是否配置成功

npm list –global

如果报错如下, 请新建的目录后再次,

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

如果显示Empty,,就证明配置没有问题

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

配置NPM的镜像

由于国内访问NPM的镜像缓慢,这里我们使用了淘宝NPM的镜像

命令 npm config set registry=https://registry.npm.taobao.org

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

检查是否配置正确

命令:npm config list

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

安装npm更新到到global目录下

命令:npm install npm –g

命令 Run npm install -g npm@8.2.0 to update 这个直接安装旧的版本,避免4048错误

(更新, 新版的安装后可能会遇到4048的问题,在启动Vue的时候无法启动, 那么可以直接安装旧的版本)

  

 

2.   配置VUE

配置系统变量,方便在CMD在任何目录可以直接运行vue的命令

 

在桌面或者文件资源管理器,右击此电脑,点击属性

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

在系统页面中, 点击高级系统设置

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

在系统属性中,点击环境变量

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

在系统变量下, 点击Path

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

点击新建, 然后添加记录 C:\Program Files\nodejs\node_modules 和C:\Program Files\nodejs\node_global ,然后点确定

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

在NPM中配置vue,

命令 : npm install vue -g

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

配置vue-router

命令: npm install vue-router -g

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

安装vue脚手架

命令 : npm install vue-cli –g

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

检查vue是否安装成功

命令: vue  -V

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

  注意,如果是安装了旧的版本,那么截图就和这个不一样,

 

3.   创建vue2.0项目

(如果在新下载的代码,也需要如此操作)

在E盘根目录下创建一个叫vueDome的项目。

 

刚开始,E盘下是个空文件夹

 

 

打开CMD, 执行命令vue init webpack vueDome

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

确认项目名称, 如果名称没问题,可以直接按回车键

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

名称校验失败,需要手动输入名称(注意名称里面不能有大小写)

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

下面的可以直接选择默认

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

都填写完成(蓝色的文字都是选择的文字)

然后开始加载项目文件

注意, 首次运行加载项目会安装依赖(如下图)

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

项目加载完成, 出现下面的内容

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

项目生产完毕后文件夹下会多出好多文件

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

进入项目

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

运行Dev项目

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

 

 

如果npm run dev 发生错误,错误如下图

新版本的webpack 的BUG,解决方法就是卸载新版本,安装老版本。

命令如下:

npm remove webpack-dev-server

npm install webpack-dev-server@2.9.1

 npm run dev

 

 

 

等cmd执行完成,显示出下面的这个页面. 就可以在浏览器里打开连接了,此时,这个窗体不能关闭

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

4. Vue的常见问题

4.1.安装依赖的时候遇到4048错误

截图如下

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

解决方法:

  1. 删除C:\Users\{账户}\下的.npmrc文件
  2. 执行 npm cache clean –force
  3. 在项目中把node_modules文件夹和package-lock.json文件删除 
  4. 重新执行npm install命令安装依赖

 

四.     升级到Vue3.X

1.   升级脚手架

卸载旧版脚手架

命令: npm uninstall vue-cli -g

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

安装新版本Vue升级包

命令: npm install -g @vue/cli

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

2.   Vue 3的常用命令

创建项目 vue create [项目名称]

安装依赖 vue install

启动项目 vue run serve

打包 npm run build

 

3.   运行Vue项目

3.1.  打开CMD跳转到项目的路径

3.2.  安装依赖vue install

3.3.  启动项目 vue run serve

五.     Net 5 Web API 的发布

1.   环境配置

1.1.      安装IIS(不需要重启)

  1. 在服务器仪表盘点击添加角色和功能

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

  1. 开始之前 页面点击下一步

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

  1. 安装类型选择默认(基于角色或功能的安装), 点击下一步

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

  1. 服务器选择,选择对应的服务器,点击下一步

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

  1. 选择服务器角色, 勾选IIS, 选择对应的服务和依赖

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

  1. 选择功能页面, 选择需要的组件, 点击安装

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

IIS安装完成

1.2.      安装Net5的运行时(不需要重启)

  1. 首先,打开IIS,打开主页的模块,检查模块中是否有AspNetCoreModuleV2,如果有, 请忽略1.2这一步, 直接到1.3

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

  1. 如下图, 在我们演示的服务器中没有AspNetCoreModuleV2模块,那么我们就需要安装Net 5的运行环境

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

  1. 下载依赖包并安装

https://download.visualstudio.microsoft.com/download/pr/52a19242-a21c-421b-97d4-e69d70e802c5/db47df274b9c64ea2e22f90983e0e946/aspnetcore-runtime-5.0.14-win-x64.exe

 

https://download.visualstudio.microsoft.com/download/pr/1055020b-9c1a-4fd1-bb3e-64de0de2ee65/fbb705491eaea5fd9137de9fd230bbba/dotnet-sdk-5.0.405-win-x64.exe

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

 

  1. 3
  2. 5
  3. 6
  4. 45
  5. 4
  6. 5
  7.  

 

 

2.   打包

2.1.  右击项目名称,点击发布, 选择文件系统.

 

 

3.   发布到IIS

3.1.  将发布的文件复制到服务器下

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

3.2.  将WMSAPI.Core.Repository.dll和WMSAPI.Core.Service.dll也拷贝到服务器下

(因为项目已经解耦,编译WMSAPIManage不会自动生成仓储实现层和服务实现层的dll, 需要右击这两个项目名点击重新生成,然后找到这两个dll复制到服务器上)

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

3.3.  安装Net5的运行时和依赖

https://download.visualstudio.microsoft.com/download/pr/1055020b-9c1a-4fd1-bb3e-64de0de2ee65/fbb705491eaea5fd9137de9fd230bbba/dotnet-sdk-5.0.405-win-x64.exe

 

https://download.visualstudio.microsoft.com/download/pr/52a19242-a21c-421b-97d4-e69d70e802c5/db47df274b9c64ea2e22f90983e0e946/aspnetcore-runtime-5.0.14-win-x64.exe

 

3.4.  检查IIS的模块是否包含AspNetCoreModule, 如果有这个模块就没有问题

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

3.5.  在IIS配置程序运行池

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 

3.6.  在IIS中发布

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

3.7.  测试

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

4.   遇到的问题

问题: 默认情况下, IIS会拦截Put和Delete请求,以至于Put和Delete在请求的时候会返回405错误或者500错误.

原因分析:在默认情况下,IIS会安装一个WebDav模块,而这个模块阻止了HTTP的PUT和Delete请求。

解决方案: 删除IIS安装的WebDav模块,选择你的项目,右边有个“模块”,双击它;找到WebDavModule,删除它。

 

六.     Vue的打包发布

1.   打包Vue

  1. 如果项目正在运行, 请先停止运行项目

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

  1. 运行命令进行编译和打包npm run build

 Vue入门(1)安装vue环境,创建Vue2 Vue3的项目并且安装IIS环境和发布到IIS

2.   部署到nginx

3.   部署到IIS

 

延伸 · 阅读

精彩推荐
  • IIS.Net6项目部署IIS步骤(图文)

    .Net6项目部署IIS步骤(图文)

    目录 1.安装 .NET Core 托管捆绑包 2.IIS服务器配置 3.网站添加流程 4.Visual Studio 2022程序发布 注意事项 支持下列操作系统: Windows 7 或更高版本 Windows Server 20...

    未知2052023-07-28
  • IIS云服务器怎么添加iis组件

    云服务器怎么添加iis组件

    云服务器 (Cloud Server)是基于云计算技术提供的一种虚拟化计算服务,它具备随时随地、弹性伸缩、灵活易用等优点,深受企业用户的欢迎。在云服务器上...

    未知1902023-06-13
  • IISIIS下时间格式斜杠和中横线的转换

    IIS下时间格式斜杠和中横线的转换

    在IIS下,虽然我们将控制面板中的时间日期格式改为 YYYY-MM-DD了,但 ASP 函数NOW()或DATE()取得的日期还是带/的格式。我们可以通过更改注册表来解决这个问题...

    服务器技术网3452020-06-18
  • IIS香港服务器使用iis搭建网站图文教程

    香港服务器使用iis搭建网站图文教程

    刚接触服务器是比较痛苦的事,最常用到的就是搭建WEB站点设置,搭建站点有多种多方式,也有很多需要设置方面的,在这简介绍一下香港服务器最常用最...

    服务器技术网13352021-11-27
  • IISIIS6.0中配置php服务全过程解析

    IIS6.0中配置php服务全过程解析

    网上有很多介绍在 IIS 6 上配置 PHP 的文章,但是那些方法不是性能不好,就是升级麻烦。下面的方法可以让你在第一次配置好后,能够非常方便的进行升级...

    服务器之家3012020-05-14
  • IISIIS实现服务器反向代理用法介绍

    IIS实现服务器反向代理用法介绍

    iis是Internet Information Services的缩写,意为互联网信息服务,是由微软公司提供的基于运行Microsoft Windows的互联网基本服务。...

    IT技术分享社区9432021-08-04
  • IISIIS防盗链 ISAPI Rewrite图片防盗链规则写法

    IIS防盗链 ISAPI Rewrite图片防盗链规则写法

    经过恶补正则表达式相关教程并对前辈们留下的规则进行修改后,以下ISAPI Rewrite已经在我的服务器上正常运作 ...

    IIS技术网2472020-09-01
  • IIS云服务器怎么建立iis

    云服务器怎么建立iis

    云服务器 怎么建立IIS 云服务器是一种基于云计算技术的虚拟化服务器,它允许用户通过互联网访问和管理自己的服务器。而IIS(Internet Information Services)是...

    未知1282023-06-18