前端项目部署云服务器

我在部署的时候还用到了一些优化的东西，优化的具体详情可以看一下下面的链接。

https://blog.csdn.net/zz00008888/article/details/119893222

优化的原因是在打开的时候发现有一个文件 chunk-vendors.js非常耗时，大概两秒，并且在加载的过程中页面会出现空白，对用户体验太差了。

这个是经过了优化后的结果，整个chunk-vendors.js 文件从最开始的两秒缩短到了一秒，虽然时间依然很长，但是已经很好了。

1.安装插件

npm install --save-dev compression-webpack-plugin

2.修改vue.config.js(这部分原文章有错误，需要用我下面的代码)

const path = require('path');
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const zlib = require('zlib')
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@i': path.resolve(__dirname, './src/assets'),
      },
    },
    plugins: [
      new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/,
      }),
      // 下面两项配置才是 compression-webpack-plugin 压缩配置
      // 压缩成 .gz 文件
      new CompressionPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8,
      }),
      // 压缩成 .br 文件，如果 zlib 报错无法解决，可以注释这段使用代码，一般本地没问题，需要注意线上服务器会可能发生找不到 zlib 的情况。
      new CompressionPlugin({
        filename: '[path][base].br',
        algorithm: 'brotliCompress',
        test: /\.(js|css|html|svg)$/,
        compressionOptions: {
          params: {
            [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
          },
        },
        threshold: 10240,
        minRatio: 0.8,
      }),
    ],
  },
}

3.在项目所在的文件夹里输入命令

npm run build

然后就会生成需要放到云服务器上的dist文件夹。

之后在云服务器需要安装两样东西：Nginx和Node.js

4.将dist文件夹复制到Nginx文件夹里的html文件夹下面。

5.修改Nginx下面conf文件夹下面的nginx.conf

直接复制下面的代码然后修改root后的地址

user  root;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8080;
        server_name  localhost;
        
        
        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 条件，支持正则，此处表示 ie6 及以下不启用 gzip（因为ie低版本不支持）
        gzip_disable "MSIE [1-6]\.";


        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   这里写好dist文件夹所在的地方;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

6.启动Nginx服务器

• 启动的命令

  start nginx

• 关闭的命令

  nginx -s stop

• 重启的命令

  nginx -s reload

注意：有时候重启的命令不一定生效，最好直接启动和关闭。

Node直接复制文件夹到云服务器启动即可。

我是软件技术专业的学生，在阿里云最新活动里看见的学生礼遇活动。刚刚好我完成了一个vue的项目，想要部署到云服务器上去试试看，所以我就在找云服务器。

我看过了很多云服务器，最后选中了阿里云服务器的原因最主要的是稳定、安全、有专门的客服来负责。毕竟如果我部署上云服务器了，但是在访问时候不稳定了，崩溃了，想找客服的时候却找不到的话那太难受了。

通过这次部署云服务器，我获得了很多的收获，首先是一种满足感，虽然我的项目做好了，但是却只能我自己看到，这有些孤芳自赏的感觉，但是一旦部署上云服务器，那么我的项目将会给大家看见，能让身边的人看见，能与网上的大家一起联络起来。其次就是收获了很多关于部署云服务器的知识，从一开始不知道该如何去部署，要选什么服务器来部署，要怎么让别人也能访问过来…………

下面是我的项目的一些截图，欢迎大家评论留言。