Nuxt.js IIS部署,Nuxt.js 发布部署vue-cli 安装 2020最新 vue 4.0安装

第一步 ：服务器安装node.js环境

1、安装node.js下载地址

​​http://nodejs.cn/download/​​

我是全部默认下一步的，安装成功之后运行命令查看是否安装成功

如果没有出现版本号，可能是安装出了问题，请根据情况自行解决。

2、安装ARR(Application Request Routing)

​​下载地址​​

​​https://www.iis.net/downloads/microsoft/application-request-routing​​

第二步：编译

执行命令：

npm run build

也可以,使用淘宝镜像

cnpm run build

注意：打开项目目录复制以下文件夹到服务器：.nuxt、static、nuxt.config.js、package.json、assets(根据自己项目文件存放情况选择)

第三步：依赖安装

cmd进入nuxt项目文件夹目录，安装依赖

运行命令：

npm install

你也可以运行淘宝镜像的命令

cnpm install

安装完成后，会多出一个文件夹 “node_modules”

接下来，我们先运行一下nuxt项目，看看是否能正常运行：

npm run start

如果能够正常运行，那进入下一步

第四步：守护进程安装pm2(node.js进程守护)

1.全局安装pm2

用管理员启动cmd，全局安装pm2：

npm i pm2 -g

然后设置pm2开机自启动 ：

（1）安装并配置：

npm i -g pm2-windows-service

安装完成后重启服务器

(2）添加系统环境变量: PM2_HOME= C:\Users\***\.pm2  (具体路径可用 pm2 -v 查看) 【可省略】

(3)  以管理员权限打开新的cmd命令行窗口,执行以下命令来安装服务:

pm2-service-install

提示Perform environment setup ?     选 n, 继续,此时, PM2服务已安装成功并已启动, 可以通过 

win + r

然后，输入

services.msc

来查看，服务名称为PM2

如果 PM2 有异常，或者开机不启动  请看

windows系统中安装pm2并设置开机自启动

 

2.安装node依赖

npm install node-cmd

然后在项目根目录创建一个：IISTest1.js，内容如下：

const cmd=require('node-cmd'); 
cmd.run('npm start');

这个JS文件名，你可以自己设定，例如：start.js

然后在cmd执行：

pm2 start IISTest1.js --name "IISTest1.js"

--name "你要取得名称" 

注意：此时你执行的cmd的路径是在项目路径下

发现运行成功，但是有个小黑框，关掉后无法运行网站就无法访问。

但是我无意间发现，重启一下服务器，此问题得到解决。

如果你的运行状态为：online，说明正常。

如果你运行后状态为：stopped，说明没有正常启动，百度搜索了以下，有人说是node.js没有权限操作cmd控制台。

一般情况下只要安装了【node依赖】就不会出现stopped问题

3、nxut网站运行正常之后，将其添加到开机启动

pm2 save

然后重启服务器，cmd执行

pm2 ls

查看当前托管运行的网站是否正常：

一定要保存pm2

执行命令：

 

pm2 save

 

4.pm2常用命令

全局安装，简直不能更简单。

npm install -g pm2

常用命令

启动

参数说明：

• ​​--watch​​：监听应用目录的变化，一旦发生变化，自动重启。如果要精确监听、不见听的目录，最好通过配置文件。
• ​​-i --instances​​​：启用多少个实例，可用于负载均衡。如果​​-i 0​​​或者​​-i max​​，则根据当前机器核数确定实例数目。
• ​​--ignore-watch​​​：排除监听的目录/文件，可以是特定的文件名，也可以是正则。比如​​--ignore-watch="test node_modules "some scripts""​​
• ​​-n --name​​：应用的名称。查看应用信息的时候可以用到。
• ​​-o --output <path>​​：标准输出日志文件的路径。
• ​​-e --error <path>​​：错误输出日志文件的路径。
• ​​--interpreter <interpreter>​​：the interpreter pm2 should use for executing app (bash, python...)。比如你用的coffee script来编写应用。

完整命令行参数列表：​​地址​​

pm2 start app.js --watch -i 2

重启

pm2 restart app.js

停止

停止特定的应用。可以先通过​​pm2 list​​获取应用的名字（--name指定的）或者进程id。

pm2 stop app_name|app_id

如果要停止所有应用，可以

pm2 stop all

删除

类似​​pm2 stop​​，如下

pm2 del app_name|app_id

pm2 del all

查看进程状态

pm2 list

更多你可以看

PM2实用入门指南

第五步：IIS发布网站

1.配置Application

打开IIS->选中服务器名称->双击 右侧功能视图 IIS 节点下的Application Request Routing Cache->点击 右侧操作视图Proxy节点下的Server Proxy Settings->勾选上Enable Proxy前面的复选框

右键》Application Request Routing Cache》打开功能》

右侧》找到Proxy》点击 server Proxy Settings

勾选上Enable Proxy前面的复选框>点击应用

2.添加站点

目录选择nuxt项目文件夹，配置自己的项目域名

然后选中刚刚发布test网站，选中url重写》添加规则》反向代理》输入刚才跑起来的地址 ​​http://localhost:3000/​​ 或者​​http://127.0.0.1:3000/​​（“http://”不需要输入）

 如果你的IIS上没有URL重写，关闭IIS 重新打开下，如果还是没有(关闭IIS界面重新打开)

需要下载 urlrewrite

下载地址​​https://www.iis.net/downloads/microsoft/url-rewrite​​

---------------------------------

 关闭IIS 重新打开下(关闭IIS界面重新打开)

---------------------------------

如果配置后还是如果访问， 然后选中刚刚发布test网站，选中url重写》选中刚才的规则》双击 或者 点击右侧的“编辑”》和我的进行对比

完整配置

到此你的网站就通过iis发布成功了！

附加一：项目迭代更新

只需要把改动的 pages 下面的文件 复制到 服务器项目文件里，然后，

第一步：停止pm2

pm2 stop app_name|app_id

假设我的名称是 IISTest1

pm2 stop  IISTest1

第二步：编译

一定要进入当前项目目录

npm run build

第三步：运行

pm2 start IISTest1.js

IISTest1.js就是我上面操作node依赖时，写的JS文件

第四步：保存pm2

执行命令：

pm2 save

附加二：你可能需要了解的

第一项

在下面文章提到的

nuxt.js源代码如果不想放在服务器上，可以删除除了.nuxt, build, node_modules文件夹和package.json文件的其他文件和文件夹，但是每次发布build和.nuxt两个文件夹和package.json文件需要进行更新，如有依赖包更新，直接运行更新依赖包命令就可以了

另外默认的服务是host在127.0.0.1本机上，在部分服务器上，如云服务器使用虚拟ip的服务器上，localhost和127.0.0.1都可以访问，但是使用内网的ip无法访问，这也直接导致了服务器外网即使端口开启了，也没有办法访问站点，需要更改server/index.js的host配置，去掉host参数

然后重新编译运行，发布就可以了。

第二项

引用的js，css和图片等资源的地址是相对路径的话就无法访问了，网上有一些解决办法是配置出站规则，但是对于nuxt编译后的项目来说，代理访问的内容gzip压缩，无法应用出站规则，而且微软的这项配置复杂，需要配置每个标签的出站规则。

这里其实就是一个路径引用问题，既然用到了vue-ruter，路由的根配置修改为虚拟目录名字一样就可以了

配置好编译，继续发布运行后，保证http://127.0.0.1:3000/app正常访问，然后修改iis代理配置