Vue项目webpack最小化部署到nginx

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/wangliuqi123/article/details/95312965

项目中引用了element-ui和echarts等第三方库，直接打包的话，js体积非常大，所以这些需要改成CDN的方式引入，达到减少包体积，优化加载首页的效果。

首先看一下，不进行优化的Vue打包：

可以看到有一个非常大的js包在这里，如果在首次加载的话，这个会严重影响到加载速度。

我们在这里进行处理，使打包后的js变小。

首先配置build/webpack.base.conf.js文件：

externals:{
    'vue':'Vue',
    'element-ui':'ElementUI',
    'echarts':'echarts',
  },

接下来修改main.js,把引入的Vue，element都全部注释掉：

去掉import，去掉Vue.use(XXX)

然后运行 npm run build：

可以看到已经没有特别大的JS文件了，接下来打开打包完成的dist文件夹下的index.html:

我们要把刚才没打包的js来进行外部CDN引入：

然后发布到服务器任意目录下（我这里是windows系统）：

配置Nginx：

server {
        listen       8080;
        server_name 114.116.125.149;
        location / {
            root C:/xixiantest;
            index index.html;

        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
    }

之后重启Nginx：

nginx -s reload；然后浏览器输入服务器IP 端口就可以访问了