Vue-cli

FuisonDesign 发布于2019-08-21 11:53 / 493人阅读

摘要：中一些优化措施在一个以后缀结尾的文件，里面可以写使用，可以识别不同的语言块，输出到模块输出到的该能够将模板转换成的函数。被称为运行时构建版本，包含了所有的特点，体积比全功能版本小。

vue-cli 中一些优化措施 Single File Components(SFCs)

,在一个以.vue 后缀结尾的文件，里面可以写js,css,html,使用vue-loader ，可以识别不同的语言块，script输出到babel-loader,模块输出到vue的vue-template-loader,该loader能够将模板转换成JavaScript的render函数。

Vue.runtime.js

被称为vue运行时构建版本，包含了Vue所有的特点，体积比全功能版本小20kb。默认情况下使用的是运行时构建版本，所以当你使用 import vue from "vue" 来引用Vue的时候，你得到的是运行时构建版本，不过你能通过 alias 配置项来改变。

production环境中去掉warn 和error信息

`if(process.env.NODE_ENV !== "production") {
   warn(("Error in " + info + ": "" + (err.toString()) + """), vm);
}`

从这里可以看出来，如果process.env.NODE_ENV 设置成production，那么提示信息在编译过程中就会被忽略，

DefinePlugin

通过它来设置process.env.NODE_ENV的值，

使用UGlifyJsPlugin

减小代码体积，去掉不必要的代码块。

     if (process.env.NODE_ENV === "production") {
             module.exports.plugins = (module.exports.plugins || []).concat([
               new webpack.DefinePlugin({
                 "process.env": {
                   NODE_ENV: ""production""
                 }}),
               new webpack.optimize.UglifyJsPlugin()
             ])
        }

Vendor file

Common Chunks插件能把你的Vendor代码（例如Vue.js这些不会经常改动的依赖包）和应用代码（每次开发过程中都会改动的代码）分离开。
你能配置插件检查一个依赖是否来自于node_modules，如果是，那就打包到vendor.js 文件。

hash

,也被称为指纹当文件变动后，丢弃缓存，默认情况下，只有当一个缓存文件过期，或者用户手动清除缓存，浏览器才会重新从服务器请求文件，如果服务器提示文件已经改动，那文件才会重新被下载（如果返回304则不会）。为了避免不必要的请求，我们可以在每次文件内容改动时，改变文件的名字，从而强制浏览器重新下载，通过在文件名称后面添加一个"指纹":hash，我们可以非常容易达到这个目的。

        
             output: {
             filename: "[name].[chunkhash].js"
            },

HTML Webpack Plugin

这个插件能在构建过程中自动在你的HTML文件里插入对构建文件的引用。
先来把构建文件中的引用去掉

     new HtmlWebpackPlugin({
         filename: "index.html"
         template: "index.html",
         inject: true,
         chunksSortMode: "dependency"
        })

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

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

深入认识vue-cli：能做的不仅仅是初始化vue工程

摘要：借助，我们通过非常简单的问答形式，方便地初始化一个工程，完全不需要担心繁复的配置等等。简单来说，就是不仅仅能初始化工程，理论上能够初始化一切工程，包括，等等等等，只要你有一份能够运行的模板，就能够通过进行工程的初始化。相信对于大部分使用过VueJS的同学来说，vue-cli是他们非常熟悉的一个工具。借助vue-cli，我们通过非常简单的问答形式，方便地初始化一个vue工程，完全不需要...

AlienZHOU 2019-08-21 17:09 评论0 收藏0
vue-admin自定义后台管理系统(二)之vue-cli3创建前端项目

摘要：自定义后台管理系统二之创建前端项目安装官方文档使用创建项目安装完后请使用测试版本是不是版本你也可以通过命令以图形化界面创建和管理项目在浏览器中访问网址查看图形化界面配置项目名包管理器，是文件夹已存在是否覆盖初始化等信息选择 vue-admin自定义后台管理系统(二)之vue-cli3创建前端项目安装vue-cli3 vue-cli官方文档使用vue-cli3创建vue-admin项...

XUI 2019-08-19 11:08 评论0 收藏0
vue-cli3.x 新特性及踩坑记

摘要：前言都到了，所以是时候玩转一下的新特性了。安装的包名称由改成了。方法一原因的配置改变了，导致正确的不能用。打开终端，切换到根路径文件里面修改为方法二是默认路径修改了路径会出现错误。按上面的方法修改完，再全局卸载果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 评论0 收藏0
vue脚手架vue-cli的卸载与安装方式

　　电脑之前安装的vue-cli版本太低，现在要改换成最新版本，那么就需要先将旧版本卸载，安装新版本。vue-cli：vue3.0之前版本使用此名称　　@vue/cli：vue3.0之后版本包括3.0版本使用此名称　　以下列举npm和yarn指令的方式：　　卸载指令：　　//卸载3.0之前的版本　　npmuninstall-gvue-cli 　　yarnglobalremovevue-cli 　...

3403771864 2022-09-22 22:21 评论0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我们该如何去配置自己的项目了其实这一切都是因为的项目初始化，帮开发者已经解决了，甚至绝大部分情形下的配置。 vue-cli 3 英文文档vue-cli 3 中文文档webpack 4 pluginswebpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 ...

xuweijian 2019-08-29 16:28 评论0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我们该如何去配置自己的项目了其实这一切都是因为的项目初始化，帮开发者已经解决了，甚至绝大部分情形下的配置。 vue-cli 3 英文文档vue-cli 3 中文文档webpack 4 pluginswebpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 ...

UsherChen 2019-08-26 12:18 评论0 收藏0