vue项目总结（一）

jackzou 发布于2019-08-21 11:38 / 2433人阅读

摘要：独立构建运行时构建目的优化项目中文件的体积。项目本身入手，改独立编译为运行时编译去掉项目中的选项，改为选项。因为在我的项目里主要是这个文件占据了比较大的空间而导致终端有提示文件太大，所以，改成运行时编译对于我来说，基本上就解决问题了。

Vue 独立构建 & 运行时构建

-- KChris 2017.3.13 (=^.^=)

目的：优化项目中文件的体积。

1.config/index.js

npm install --save-dev compression-webpack-plugin
productionGzip: true

//Gzip off by default as many popular static hosts
//such as Surge or Netlify already gzip all static assets for you.

2.查看编译后各文件体积大小等信息

1）直接用 npm 命令：

npm run build --report

2）用 webpack 命令：

webpack --config build/webpack.dev.conf.js
webpack --config builg/webpack.dev.conf.js  --profile --json => stats.json

结合：http://alexkuz.github.io/webp... 或者 http://webpack.github.io/anal... 上传 json 文件生成图表

Note: 不要小看这个步骤，这对于你优化项目文件的体积非常重要，它会引导你从哪些文件入手进行你的优化。从这里，我发现 vue.common.js 这个文件占了我很大的内存空间，于是，我才会在 Google 上搜索这个文件，然后发现 vue2.x 中，它的编译分独立构建和运行构建，再一步步地慢慢找到下面步骤的。

3.Vue 项目本身入手，改独立编译为运行时编译

1）build/webpack.base.conf.js

alis： {
    "vue$": "vue/dist/vue.runtime.common.js"
}
// change vue.common.js to vue.runtime.common.js

2) 去掉项目中的 template 选项，改为 render 选项。

new Vue({
    render: function(h) {
        return h("App")
    }
})
// remove template options: template: ""

ok,在这里我们就将 vue 的独立构建改成运行时构建了。这时，我们再 npm run build，会发现，文件体积确实变小了很多，也没有了之前的 warning 提示。因为在我的项目里主要是 vue.common.js 这个文件占据了比较大的空间而导致终端有 warning 提示文件太大，所以，改成运行时编译对于我来说，基本上就解决问题了。

云服务器 GPU云服务器外呼项目总结云服务器搬迁项目总结云服务器搭建vue项目腾讯云服务器部署vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86948.html

vue 项目总结一文件夹结构配置

摘要：文件夹结构文件夹里的文件夹设置是灵活的，可以根据自己的习惯进行，不必雷同。对文件夹配置的总结先到此为止，下一篇文章会是对文件夹里具体文件的配置和例子总结，有需要的可以去看看。之前一段时间都在使用 vue 开发后台管理系统，在摸索的过程中对 vue 本身和模块化、规范化开发有了更深的认知，现在记录下来，希望对其他需要开发项目的人有帮助。项目配置首先，在确定好使用的框架和组件库后，先...

spacewander 2019-08-02 16:00 评论0 收藏0
vue 项目总结一文件夹结构配置

摘要：文件夹结构文件夹里的文件夹设置是灵活的，可以根据自己的习惯进行，不必雷同。对文件夹配置的总结先到此为止，下一篇文章会是对文件夹里具体文件的配置和例子总结，有需要的可以去看看。之前一段时间都在使用 vue 开发后台管理系统，在摸索的过程中对 vue 本身和模块化、规范化开发有了更深的认知，现在记录下来，希望对其他需要开发项目的人有帮助。项目配置首先，在确定好使用的框架和组件库后，先...

wind5o 2019-08-22 11:15 评论0 收藏0
基于vue项目的知识总结

摘要：前言用有一段时间了，从用搭建项目一步步配置，到之后的研究动效这些，一直想写些东西记录一下做个总结，刚好趁着有空就整理一下。结语有新的知识点会更新到知识体系中，总结和心得体会会单独写文章详述，努力填坑前言用vue有一段时间了，从用vue-cli搭建项目、一步步配置axios、vuex、vue-router，到之后的研究canvas、动效这些，一直想写些东西记录一下、做个总结，刚好趁着...

tianlai 2019-08-29 14:07 评论0 收藏0
【Vue项目总结】项目nginx部署

摘要：项目开发完成，接下来是上线，关于项目的部署，我司前端是部署在服务器上，关于的相关文档，请自行查阅本文只记录部署时碰到的一些问题。其他总结文章常规打包优化方案组件通信处理方案后台管理项目总结项目开发完成，接下来是上线，关于vue项目的部署，我司前端是部署在nginx服务器上，关于nginx的相关文档，请自行查阅；本文只记录部署时碰到的一些问题。打包 vue项目打包后，是生成一系列的静...

CntChen 2019-07-25 14:50 评论0 收藏0