初涉vue--环境搭建

程序员文章站 2024-03-11 16:01:13

...

公司前后端分离后，前端使用了框架vue,不能像以前那样双击就能访问了，而前端妹纸只能连一个ip。无奈之下，只能在本地搭建环境运行前端项目了。

需要安装git,node,npm。原理呢，我也不是很清楚。大致过程就是先安装git,然后安装node,node里面包含了nmp,最后打开git base窗口，使用命令行安装npm。最后就是运行项目了。

1.git安装

我安装的是Git-2.13.3-64-bit.exe这个东西，细节不赘述了

2.node安装

这个是node官方网址，历史版本下载地址https://nodejs.org/en/download/releases/ 。如果你的项目对node，nmp的版本有要求，这就一定要注意了。在这个下载页面上可以看到node与nmp的版本对应信息。一定一定要注意。我在这里就坑到了，我开始用的是Node.js v4,对应的npm就是2，而项目要求的是Node 4+, npm 3+。接着我就下载了Node的最新版本，坑爹的事情还在继续发生。当我执行cnmp install 时，提示

Downloading binary from https://npm.taobao.org/mirrors/node-sass/v3.13.1/win32-x                                                                                                                                                                                               64-57_binding.node
Cannot download "https://npm.taobao.org/mirrors/node-sass/v3.13.1/win32-x64-57_b                                                                                                                                                                                               inding.node":

HTTP error 404 Not Found

我访问这个网址https://npm.taobao.org/mirrors/node-sass/v3.1.1/，发现最高的是到win32-x64-44_binding.node. 只好降低node版本了。最后选择了v5.1.1,对应的nmp版本是3.3.12。
安装node很简单，一直下一步就可以了。重要的是版本的选择。

3.安装nmp
前边提到的那些都是在安装nmp过程中遇到的，我们在项目根目录下打开Git Bash窗口，依次执行以下命令。
-- 如果你的电脑装了*软件，会对安装过程产生影响，所以使用这个命令，取消代理。

$ npm config set proxy null

-- 这个命令时从淘宝镜像下载node-moudle, 因为nmp在国外服务器上，下载速度会很慢。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

-- 使用这个命令来安装nmp

$ cnpm install

-- 使用这个命令来启动项目

$ npm start

如果一切正常的话，浏览器会被打开，并且加载http://localhost:8080这个地址。

4.启动项目
如上使用 npm start这个命令来启动项目，但是我在这个过程中依旧遇到了问题

Error: listen EADDRINUSE :::8080

8080端口号被占用。可以打开dos窗口，使用如下命令来查看使用这个端口的进程，并且杀死它，在重新启动，就ok了

C:\Users\Administrator>netstat -aon|findstr "8080"
  TCP    0.0.0.0:8080           0.0.0.0:0              LISTENING       3300
  TCP    192.168.18.57:51325    101.227.143.109:8080   CLOSE_WAIT      4300
  TCP    [::]:8080              [::]:0                 LISTENING       3300

C:\Users\Administrator>tskill 3300

5.访问
http://localhost:8080这个地址就可以访问了。但是在请求后台借口是会存在跨域问题，这个具体看后台代码是怎么解决的。
我把问题贴出来

XMLHttpRequest cannot load http://localhost/Foo.API/token. The value of the 'Access-Control-Allow-Origin' 
header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. 
Origin 'http://localhost:5000' is therefore not allowed access. The credentials mode of requests 
initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

造成这个的原因，我在网上找到的解决方案是：

@craigfrancis, One thing I suspect is that users like to be able to specify

Access-Control-Allow-Origin: *

since it means that they don't need to worry about supplying the Vary: Origin header (for correct browser/proxy caching). So maybe in their code, they include a check for Origin, and if it's on their 'safe' list, they respond with:

Access-Control-Allow-Origin: *

rather than

Access-Control-Allow-Origin: http://www.goodguy.com

最终的解决方案就是设置将Access-Control-Allow-Origin设置为发送请求的网址，将Access-Control-Allow-Credentials设置为ture

res.setHeader("Access-Control-Allow-Origin",httpRequest.getHeader("Origin"));
res.setHeader("Access-Control-Allow-Credentials", "true");

同样，为什么这样设置我也不是很清楚。如果这篇文章有幸被前端大神看到，诚邀答疑:)。
我说下我们的过滤规则，请求ip是允许ip,并且发送请求的网址含有指定字符时，就如此设置。那么我就要做两样工作。第一，把自己的ip在配置文件里，加到允许ip;第二，修改host,设置一个域名，指向自己的ip.
至此，大功告成。