本教程简单的介绍下，初学服务器部署web网站绕了不少弯路的经历。
由于本人之前是装的是Windows Server，搭建的是宝塔面板，奈何性能卡就打算在Centos使用Nginx部署Web。下面将对问题的解决的过程进行描述。
一、安装所需的工具：（这里的详细使用教程自行百度）
WinSCP：下载链接：https://pan.baidu.com/s/1zDD2qbt8JVhyZG1bZgJp2w 提取码：krx8
SecureCRT：汉化版下载链接：https://fuck-u.lanzous.com/iSVZHfcplad 提取码: ea3y
WinSCP主要进行对Vue项目的上传和Nginx的nginx.conf的配置。SecureCRT远程登陆自己的服务器(也可以使用windows自带的CMD命令连接：ssh root@主机地址)
二、安装Nginx
1. 下载最新的yum并解压(已安装可以忽略)
wget http://yum.baseurl.org/download/3.2/yum-3.2.28.tar.gz
tar zxvf yum-3.2.28.tar.gz
2. 重点：解压后先不着急安装，在etc目录下面手动创建一个yum的conf文件，不然会报找不到文件的错yum.cli:Config Error: Error accessing file for config file:///etc/
touch /etc/yum.conf
3. 进入yum目录，运行安装
cd yum-3.2.28
yummain.py install yum
期间会提示安装新版本，y回车即可
4. 安装并启动Nginx
yum install nginx # 安装nginx
systemctl start nginx.service #开启 nginx 的服务
systemctl enable nginx.service #跟随系统启动
三、配置vue.config.js文件
1. 在vue项目根目录中，下载插件
npm install --save-dev compression-webpack-plugin
2. 修改vue.config.js配置文件，如果没有vue.config.js，在根目录自己创建一个，下面是配置文件的代码
const path = require('path'); const webpack = require('webpack') const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = ['js', 'css'] const isProduction = process.env.NODE_ENV === 'production' module.exports = { lintOnSave: false, runtimeCompiler: true, publicPath: './', // 设置打包文件相对路径
devServer: { disableHostCheck: true }, // 开启内网穿透权限,可忽略
productionSourceMap: false, publicPath: process.env.NODE_ENV === "production" ? "/shop" : "/", chainWebpack: config => { // 发布阶段打包入口
config.when(process.env.NODE_ENV === "production", config => { config .entry("app") .clear() .add("./src/main-prod.js"); // 配置cdn依赖
config.set("externals", { vue: "Vue", "better-scroll": "BScroll", vant: "vant" }); // 是否发布模式,是
config.plugin("html").tap(args => { args[0].isProd = true; return args; }); }); // 开发阶段打包入口
config.when(process.env.NODE_ENV === "development", config => { config .entry("app") .clear() .add("./src/main-dev.js"); // 是否发布模式,否
config.plugin("html").tap(args => { args[0].isProd = false; return args; }); }); }, configureWebpack: { resolve: { // 配置路径别名
alias: { assets: "@/assets", common: "@/common", components: "@/components", network: "@/network", views: "@/views" } }, plugins: [ new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // 下面是下载的插件的配置
new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, minRatio: 0.8 }), new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 5, minChunkSize: 100 }) ] }, };
3.将打包压缩好的dist文件夹使用WinSCP上传到/root/根目录下
四、配置nginx.conf文件(在/etc/nginx目录下)，并重启
1 # For more information on configuration, see: 2 # * Official English Documentation: http://nginx.org/en/docs/
3 # * Official Russian Documentation: http://nginx.org/ru/docs/
4
5 # user nginx; 6 user root; 7 worker_processes auto; 8 error_log /var/log/nginx/error.log; 9 pid /run/nginx.pid; 10
11 # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
12 # include /usr/share/nginx/modules/*.conf; 13
14 events { 15 use epoll; 16 worker_connections 1024; 17 } 18
19 http { 20 log_format main '$remote_addr - $remote_user [$time_local] "$request" ' 21 '$status $body_bytes_sent "$http_referer" ' 22 '"$http_user_agent" "$http_x_forwarded_for"'; 23
24 access_log /var/log/nginx/access.log main; 25
26 sendfile on; 27 tcp_nopush on; 28 tcp_nodelay on; 29 keepalive_timeout 65; 30 types_hash_max_size 2048; 31
32 include /etc/nginx/mime.types; 33 default_type application/octet-stream; 34
35 # Load modular configuration files from the /etc/nginx/conf.d directory. 36 # See http://nginx.org/en/docs/ngx_core_module.html#include 37 # for more information. 38 include /etc/nginx/conf.d/*.conf; 39
40 server { 41 listen 80; 42 # listen [::]:80 default_server; 43 server_name 域名 服务器ip地址; 44
45 gzip on; 46 gzip_min_length 1k; 47 gzip_comp_level 9; 48 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; 49 gzip_vary on; 50 gzip_disable "MSIE [1-6]\."; 51 # root /usr/share/nginx/html; 52
53 # Load configuration files for the default server block. 54 # include /etc/nginx/default.d/*.conf; 55
56 location / { 57 root /root/dist; 58 try_files $uri $uri/ @router; 59 index index.html index.htm; 60 } 61 location @router { 62 rewrite ^.*$ /index.html last; 63 } 64 error_page 404 /404.html; 65 location = /40x.html { 66 } 67
68 error_page 500 502 503 504 /50x.html; 69 location = /50x.html { 70 } 71 } 72 }
到这里，基本上是就完成了，确保项目能正常运行，在SecureCRT使用nginx -s reload 重启nginx服务