Vue-cli project packaged and deployed to nginx proxy access

A, Vue-cli deployed to the server.

Download nginx server.

Official website: http: //nginx.org/en/download.html

 

1, why should Vue-cli nginx instead deploy to deploy Tomcat.

The reason: We use the Vue-cli, the general use proxyTable proxy, at the time of development is no problem, but to deploy to the Tomcat server when it is not carried out proxyTable agent, only use nginx server for reverse proxy.

2, Vue-cli deployed to server problems encountered.

Before packing, we need to modify the configuration.

If you have to use route, you need to src / router / index.js add

 

After vue package, the background image does not show the problem
to find the build / utils.js file
modifications to be content as follows:

vue written way lazy loading, packaged and released to deploy to a server error, modify the content index.js under the following config directory assetsPublicPath modify the following content

Package command: npm run build

Sometimes the situation may appear stuck motionless in the implementation of npm run build commands.

solution:

修改为淘宝源：npm config set registry http://registry.cnpmjs.org
在输入npm run build就可以了。

打包之后会生产dist文件，文件里包含static和index.html。

将dist放在nginx/html

 

Modify the server configuration file.

nginx-1.16.0\conf\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   html;
            index  index.html index.htm;
        }
        location /api {
            proxy_pass http://47.112.134.222:8080/api/web/v1/; //需要访问的接口
        }

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

}

 

 

启动服务器：start nginx

浏览器输入“http://localhost/dist/”就可以访问了。

关闭服务器：nginx -s stop