Vue项目上线服务器遇到的问题， 以及解决方法， 后台使用的是node， 附带node安装方法

第一个问题

就是端口没打开

在服务器管理的安全规则里面添加端口， tcp协议， 这样就能访问到网页了，添加之后， 记得重启服务器

之后就可以将vue项目 使用 npm run build 来进行打包了， 放到相对应的位置， 如果访问， 则会自动查找index文件来打开

第二个问题

出现在后台方面， 首先必须安装node

这个是必须的， 这个就有个坑， 如果直接使用

sudo yum install epel-release -y

的方法进行安装， 则会安装远古版本的node， 这个node是不带npm 工具的， 得手动安装

所以我们可以在安装之前就先切换源

curl --silent --location https://rpm.nodesource.com/setup_10.x

使用这个指令的话， 能切换源到10.x以上的版本， 具体是多少他会自己装好，只要切换到他自带npm的版本就可以了，这样就省很多事情， 减少了不必要的折腾

然后在使用 sudo yum install epel-release -y 来进行安装node， 这样就可以不用管npm是否安装好了

可以使用 node -v 来查看node版本

可以使用 npm -v 来查看npm的版本

如果， 安装了node远古版本， 并且没有npm， 也装不好， 就重装node， 先卸载node 使用  yum remove nodejs npm -y

然后安装比较高版本的node

然后将后台文件上传到服务器中，  在服务器中， cd 到文件中， 然后直接使用node 文件名， 来进行node启动， 这个node启动后，就算是xshell关了好像也不会停止，除非手动将他关闭

第三个问题

 

 

自己在调试的时候， 明明能够链接上服务器上面node， 也能正常返回，为什么上线后， 就会出现404呢？

在本地调试的情况下

 上传到服务器中的情况

当你的vue项目上传到服务器中， 可以正常访问的时候， 这个时候就会出现生产环境， 和开发环境的区别了，

在开发环境中， 使用的是相对的路径， 也就是/apis的方式进行请求， 这样可以解决跨域问题。

在生产环境中， 使用的是全部路径， ip地址， 端口号，如果这两个不进行切换的话， 请求永远都是404

那么vue是如何切换的呢， 

首先在vue的根目录创建两个文件

一个是  .env.development 是以点开头的文件也就是vue的配置文件， 这个是开发环境的配置

里面填写的是

 

 

VUE_APP_URL="/apis/"

 里面为什么是/apis/ 呢， 因为使用的vue代理的地址也就是

 这样的代理使用的是/apis， 所以是这样的

一个是 .env.production 也是点开头的文件， 也就是生产环境

里面填写的是

VUE_APP_URL="http://47.100.185.137:523/"

这两个文件都是一行代码， 第二个是服务器的ip加上端口号， 这个必须得写全， 请求的是哪个地址， 就写那个地址， 根据自己的环境进行更改 

在创建好了之后呢， 目录是这样的

然后呢， 最重要的一步来了， 必须得使用， 虽然创建了配置文件， 但是也得使用，

在引用axios的地方

加上这句话 

axios.defaults.baseURL = process.env.VUE_APP_URL

或者在使用axios的 baseURL 里面写上 process.env.VUE_APP_URL

我的写法是这样的：

因为是封装好的方法， 所以有些不一样

这个时候网页就会报同源策略， 

在node后台添加一句

app.all('*', (req, res, next) => {//简单的解决跨域问题, 只是测试所以没有涉及太多东西
        res.header('Access-Control-Allow-Origin', '*')
        res.header('Access-Control-Allow-Methods', 'GET, POST')
        res.header('Access-Control-Allow-Headers', 'x-requested-width, x-access-token, Content-Type')
        next()
    }) 

所有请求都会经过这个处理这样服务器就可以正常进行请求了

那么也恭喜你， 你的网页上线了