本教程簡單的介紹下，初學服務器部署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服務