vue 线上部署 流程

1. vue 打包

   1. 输入 npm run build:prod 打包， 得到 dist 文件夹的打包结果,

yarn build

 

      css/chunk-vendors.3733c13d.css
      js/chunk-vendors.93d9e3ec.js
      css/app.233ef3ab.css
      js/app.d30a5d21.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.93d9e3ec.js      344.95 KiB        92.85 KiB
  dist\js\app.d30a5d21.js                19.58 KiB         8.72 KiB
  dist\css\chunk-vendors.3733c13d.css    14.81 KiB         2.07 KiB
  dist\css\app.233ef3ab.css              7.17 KiB          1.26 KiB

 

 

build:prod 是由这里来的，

打包结果得到 dist 文件

2 . 配置nginx    

    server {
        listen       8000;
        server_name  localhost;

        # 文件路径
        location / {
			try_files $uri $uri/ @router;
            root   D:\study\admin-vue\dist;
            index  index.html index.htm;
        }
		
        # 后端服务器
		location /api {
		   proxy_set_header   Cookie $http_cookie;
		   proxy_pass  http://api_212121;
		   proxy_redirect ~^http://api_212121(.*) http://api_212121$1;
		}
		
        # vue 在history 模式下的配置
		location @router {
           rewrite ^.*$ /index.html last;
        }
		
    }

3. 启动nginx 查看结果

http://localhost:8000/system/privilege