本次部署主要用到了以下工具：

远程登录软件/网页：

1
2
3

Terminus
宝塔
fileZilla

package：

1
2
3

pm2 -> 用于启动node.js 后端文件
cors-anywhere -> 用于自制跨域代理服务器
cross-env -> 用于判断开发/测试环境

跨域问题解决

经测试，使用tushare.pro 的 api 进行http请求时会遇到跨域问题，当部署到生产环境时，vue.config.js中的devServer就没用了，所以要另辟蹊径。

总结一下，目前本地遇到跨域的（暂时）解决方法有以下几条：

使用谷歌浏览器中的 “Allow CORS” 插件

地址：https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=zh-CN

安装好后，当插件图标点亮时，即可跨域发送http请求。

配置vue.config.js

该方法目的是添加代理，将baseUrl改写，这样浏览器会默认你发送的请求是同源的（这里讲的不一定对），以下为简单配置：

1
2
3
4
5
6
7
8
9
10
11

module.exports = {
   
  devServer: {
    proxy: {
      "/": {
        target: "http://www.example.com",
        changeOrigin: true,
      },
    }, 
  },
};

需要注意的是，当配置完后，一定要重启项目，不然还是会报错。重启后，在发送请求时，原来是”http://www.example.com/add"，现在写成"/add"即可。

配置 axios.defaults.baseURL

该方法需要你使用axios进行ajax请求，其实也是修改baseUrl，为了方便使用，我们直接在main.js里直接配置axios，这样之后就不用到处导入了：

1
2
3

import axios from "axios";
Vue.prototype.$axios = axios;
axios.defaults.baseURL = "http://www.exmaple.com";

在使用axios进行http请求时，可以直接使用 axios.get(“/add”) 即可

配置nodejs后端，添加允许跨域header

此方法只适用于发送http请求给自己写的nodejs后端，对于一些网络平台上提供的api，本方法不适用。

在引入express之后，我们直接给express设置允许跨域的header（注：以下代码是从网上拉的）

1
2
3
4
5
6
7
8

app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

nodejs 后端 引入 cors 包 （此方法我没用过，网上看的）

直接引入cors包即可

1
2

cnpm install cors --save
const cors=require("cors")

使用cors-anywhere 配置自己的代理服务器

此为一劳永逸的方法，前提是你自己得有台服务器。

项目地址： https://github.com/Rob–W/cors-anywhere

首先在本地，我们新建一个cors.js文件，然后将以下代码复制粘贴进去：

1
2
3
4
5
6
7
8
9
10
11
12

// Listen on a specific host via the HOST environment variable
var host = process.env.HOST || '0.0.0.0';
// Listen on a specific port via the PORT environment variable
var port = process.env.PORT || 8080; //8080为你要配置的端口号，改成其它的也可以：
var cors_proxy = require('cors-anywhere');
cors_proxy.createServer({
    originWhitelist: [], // Allow all origins
    requireHeader: ['origin', 'x-requested-with'],
    removeHeaders: ['cookie', 'cookie2']
}).listen(port, host, function() {
    console.log('Running CORS Anywhere on ' + host + ':' + port);
});

其中8080为想要在服务器上启动的端口号，改成其它的也可以。

这之后我们将这个文件复制粘贴到服务器中的home/www/你的项目文件夹/新建的backend文件夹中，然后输入下面两个指令

1
2

npm init
npm install cors-anywhere

如果npm下载速度慢，可以使用cnpm，以下为安装指令：

1

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

再之后尝试使用node cors.js 启动项目，如果没问题的话，我们就需要安装pm2，为的是当我们从服务器退出后，这个nodejs服务仍可以运行。

配置 pm2

首先我们进行安装：

1

cnpm install -g pm2

安装好之后，我们需要进入cors.js所在的文件夹，然后输入 pm2 start cors.js ，看是否能运行，如果能运行，我们尝试在浏览器中输入 你的云服务器ip地址:之前配置的端口号, 如 “83.134.56.321:8080”，第一次可能会进不去，那是因为该端口没有放开，需要输入以下指令，放开该端口：

iptables -I INPUT -p tcp –dport 8080 -j ACCEPT

8080替换为你想要放开的端口号

在这之后，如果其它配置没问题的话，会出现如下界面：

这时就配置成功了。
当你需要进行本地跨域发送http请求时，可以使用类似”http://你的云服务器ip地址:之前配置的端口号/你想要请求的api”，例如 “http://61.68.536.181:8111/http://api.waditu.com/”，这样就可以了。

如果你购买了域名了的话，请看下面一个子标题中的内容，不然就可以跳过。通过配置nginx反向代理，可以通过域名访问到这个界面。

配置nginx反向代理

在安装好nginx之后，我们需要进入ngnix文件夹（建议一开始可以使用宝塔，比较直观），然后找到nginx.conf文件，在http{ } 中输入include /etc/nginx/conf.d/*.conf;然后保存，然后在nginx文件夹中新建一个conf.d文件夹，这样这其中的所有配置文件就会被导入到nginx.conf 这个主配置文件中。然后我们在conf.d文件夹中新建server.conf，然后将以下复制进去：

1
2
3
4
5
6
7

server {
    listen  80;
    server_name example.com;
    location / {
        proxy_pass      http://127.0.0.1:之前你设置的端口号; 
    }
}

这里127.0.0.1:后的端口号要和之前nodejs文件设置的保持一致，上面的80不用修改，example.com替换成你的域名（最好设置一个子域名，如果你用的是腾讯云，可以直接在dns解析中添加一个记录，主机记录设置为你想要子域名的名字，然后记录值改为你的公网ip即可），在保存之后，输入以下指令重启nginx服务：

1

service nginx restart

如果能通过域名访问到你的代理服务器，恭喜你，成功绕过了很多我遇到的坑。

配置后端nodejs

在配置好代理服务器之后，我们可以先配置后端，方法就是把nodejs文件及packge.json和其它静态资源放到/home/www/新建项目名称/server 下，然后安装后端启动所需要的依赖，再使用 node server.js 启动。

还是要注意，你需要通过iptables -I INPUT -p tcp --dport 3000 -j ACCEPT 指令（3000换成对应端口号）来开放端口，使得前端能向该端口发送http请求。

在这之后，我们可以来配置nginx反向代理，方法和之前说过的很像，但这里有个坑，就是如果你在nignx配置文件里加了诸如:

1
2
3
4

add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers Content-Type;
        add_header Access-Control-Allow-Methods POST;
        add_header Access-Control-Allow-Methods GET;

这样允许跨域访问等的headers，那么你的node.js文件里就不能出现之前的cors包或者是 app.all(*)配置，如果重复了启动后会提醒你跨了两次域。

我个人的nodejs简单配置大致就到这里。

前端配置

利用cross-env 简单区分开发和生产环境

在区分开发环境和生产环境时，我们一般会用到process.env.NODE_ENV 这个变量，如果要在服务端配置的话，需要在~/.bashrc 中 输入 export NODE_ENV=production，比较麻烦。

较为简单的方法是引入cross-env这个包：

1

cnpm install cross-env

如果你是用 vue create命令创建的项目，package.json中serve和build脚本对应的应该是：

1
2

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",

当我们引入cross-env后，我们只需要作出如下改变就能区分开发和生产环境：

1
2

"serve": "cross-env NODE_ENV=development && vue-cli-service serve",
"build": "cross-env NODE_ENV=production && vue-cli-service build",

设置好之后，我们就可以利用if(process.env.NODE_ENV == "development" 和 if(process.env.NODE_ENV == "production") 来分别引入生产和开发环境所需要用到的东西。

关于静态资源和nginx的配置

对于我自己的话，需要请求本地静态资源（主要是json文件）在部署时，最好放在public文件夹下，然后使用axios.get(./xxx.json)，获取。

除此之外，还需要配置nginx，方法也是新建.conf 配置文件，和后端配置不一样的是，对于前端我们需要找到部署项目的.html文件。

我们只需要在项目中输入 npm run build，然后把部署文件压缩后解压到服务器对应文件夹中，就会看到index.html文件。

在配置.conf时，需要有个root配置，指向你的项目html文件所在的文件夹，为的是找到index.html：

1
2
3
4
5
6
7

server {
    listen 80;
    server_name xxx.example.com;
    location / {
        root /home/www/xxxx/client;
    }
}

至此，vue前后端部署简单配置完成。