nginx部署VUE項目

一、nginx部署Vue項目

           前提條件是已經搭建好了nginx的環境，nginx默認的端口是80。其實我們知道，vue項目默認的端口是

8080，這個默認的端口這部分就不需要特殊的處理。我的整體vue的項目目錄結構如下：

1.1、修改vue的配置

         在vue的項目中，找到vue.config.js，在這地方添加整體的路徑，具體文件的內容信息如下：

//強制關閉js的文件檢查

module.exports = {
  publicPath: './',
  lintOnSave: false
}

1.2、構建vue項目

          在vue的項目中，執行命令npm run build來進行構建，構建會就會打包在dist的目錄下，具體構建過

程如下：

npm run build #執行構建的命令

> storm-ui@0.1.0 build /Applications/code/Yun/storm-ui
> vue-cli-service build

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

⠋  Building for production...

 WARNING  Compiled with 3 warnings                                                                                     21:04:53

 warning  

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  js/chunk-vendors.f4967954.js (1.57 MiB)

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.84 MiB)
      css/chunk-vendors.1f15154d.css
      js/chunk-vendors.f4967954.js
      css/app.2dade926.css
      js/app.6e24aa06.js


 warning  

webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

  File                                   Size                                      Gzipped

  dist/js/chunk-vendors.f4967954.js      1610.91 KiB                               509.18 KiB
  dist/js/app.6e24aa06.js                63.34 KiB                                 13.24 KiB
  dist/css/chunk-vendors.1f15154d.css    205.07 KiB                                33.06 KiB
  dist/css/app.2dade926.css              3.36 KiB                                  0.90 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

構建成功后，下來把vue項目下的dist文件夾的內容上傳到Linux服務器下的/usr/local/webapp

目錄下，具體上傳后，整體的內容如下：

tree webapp/
webapp/
└── dist
    ├── css
    │   ├── app.2dade926.css
    │   └── chunk-vendors.1f15154d.css
    ├── favicon.ico
    ├── fonts
    │   ├── element-icons.535877f5.woff
    │   └── element-icons.732389de.ttf
    ├── index.html
    └── js
        ├── app.6e24aa06.js
        ├── app.6e24aa06.js.map
        ├── chunk-vendors.f4967954.js
        └── chunk-vendors.f4967954.js.map

4 directories, 10 files

1.3、修改nginx.conf

          下來修改下nginx.conf，具體完整的內容如下所示：

cat nginx.conf

#user  nobody;
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       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root /usr/local/webapp/dist;
            #root   html;
            index  index.html index.htm;
        }

        #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;
        #}
    }

1.4、熱啟動nginx

         下來再次熱啟動nginx，具體命令如下：

[root@centos-master usr]# cd local/nginx/
[root@centos-master nginx]# pwd
/usr/local/nginx
[root@centos-master nginx]# sbin/nginx -t 
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
[root@centos-master nginx]# sbin/nginx -s reload

1.5、驗證環境

         下來直接使用服務器的IP地址來訪問，如果能夠正常訪問，說明環境已部署OK，具體如下：

 如上，整個vue的項目就可以很輕松的在nginx中部署成功。(我之前一直沒搞清楚，vue是8080端口，nginx是80端口

，其實忘記了nginx它具備反向代理的特性)。