Vue项目webpack最小化部署到nginx

最新推荐文章于 2024-12-11 14:09:02 发布

原创最新推荐文章于 2024-12-11 14:09:02 发布 · 778 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Nginx #webpack

Vue 同时被 3 个专栏收录

11 篇文章

订阅专栏

部署

5 篇文章

订阅专栏

nginx

2 篇文章

订阅专栏

博客介绍了Vue项目打包优化方法。因项目引用第三方库，直接打包js体积大，影响加载速度。通过配置webpack文件、修改main.js，去掉部分引入，再用CDN引入未打包js，可减小包体积。最后介绍了将项目发布到服务器并配置Nginx的步骤。

项目中引用了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;
        }
    }