Vue项目部署阿里云Nginx(压缩chunk-vendors.js文件)

本教程简单的介绍下，初学服务器部署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目录下)，并重启

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

# user nginx;
user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
# include /usr/share/nginx/modules/*.conf;

events {
    use epoll;
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        # listen       [::]:80 default_server;
        server_name  域名 服务器ip地址;

        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        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;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
        # root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        # include /etc/nginx/default.d/*.conf;

        location / {
            root /root/dist;
            try_files $uri $uri/ @router;
            index index.html index.htm;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}

到这里，基本上是就完成了，确保项目能正常运行，在SecureCRT使用nginx -s reload  重启nginx服务