node+vue手动部署服务器

每次都会忘记配置nginx和服务器端口，所以记录下来整个步骤：

一、前提

1. 云服务器购买

2. 安装Node 【v10.24.0】

3. 安装Nginx 【nginx/1.14.1】

   • 直接配置nginx文件 输入命令行：vim /etc/nginx/nginx.conf

   server {
       listen       6403; #前端端口
       server_name  101.43.29.xxx; #服务器地址或者域名
       location / {
               root /home/vue/car; # 前端打包完后的代码存放的路径
               index index.html;
       }
   
       location /api/ {
               rewrite /api/(.*) /$1 break;
               proxy_pass http://localhost:3000/; #3000是后端服务的端口号
       }
   
       error_page 404 /404.html;
           location = /40x.html {
       }
   
       error_page 500 502 503 504 /50x.html;
           location = /50x.html {
       }
   }
   

   • 改完后记得nginx -s reload重启

4. 服务器端口放行 注意：6403【前端】/3000【后端】

二、node项目注意

1. 将源码上次至服务器，放在了 /home/serves/mic-services
2. npm i 安装依赖
3. 安装 pm2.io/

三、前端项目注意

1. 请求时将baseURL设置为'api'
2. 请求时代码如下

async getCarLst() {
  const res = await service.get('vue/car/list')
  this.carList = res.data
}

最后网页发出的全路径：101.43.29.xxx:6403/api/vue/car…

3.vue.config.js配置

const path = require('path');
const { name } = require('./package');

function resolve(dir) {
  return path.join(__dirname, dir);
}
const port = 9004;
module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  filenameHashing: true,
  publicPath: './', //线上改为'./'
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    hot: true,
    disableHostCheck: true,
    port,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {  //配置跨域
      '/api': {
        target: 'http://101.43.29.xxx:3000/', 
        changOrigin: true,  //允许跨域
        pathRewrite: {
          '^/api': '' 
        }
      },
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    output: {
      libraryTarget: 'umd',
      filename: 'vue2.js',
      library: 'vue2',
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

4. 打包后将dist中所有文件上传到服务器

注意这些文件的存放路径要和上面的nginx中的location对应

5. chrome运行：101.43.29.xxx:6403/#/energy