简体中文

Vue-Cli4与Vue-Cli2区别浅谈

当时学习 Vue-Cli 的时候看的是 Vue-Cli2 的相关教程，当把 package.json 上传 github 的时候提醒有安全问题，于是准备使用最新版的 Vue-Cli ，我一直认为才更新到 Vue-Cli3，没想到都到Vue-Cli4了
可能有很多特性在 Vue-Cli3 时就有了，做个笔记记录一下

创建工程

Vue-Cli4文档推荐以下两种方式创建项目

vue create my-project
# OR
vue ui # 可视化操作

如果仍然需要使用vue init webpack初始化项目的话，则需要安装cli-init，但是拉取的仍然是Vue-Cli2.0版本

npm install -g @vue/cli-init

启动服务

Vue-Cli4中使用npm run serve运行开发模式，其配置为

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }

也可以使用vue ui进行可视化操作

浏览器兼容

package.json文件里的browserslist字段 (或一个单独的.browserslistrc文件)，指定了项目的目标浏览器的范围。这个值会被@babel/preset-env和Autoprefixer用来确定需要转译的JavaScript特性和需要添加的CSS浏览器前缀。查阅 此处 了解如何指定浏览器范围

代码拆分

// route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
    /* webpackChunkName: "about" */

vue-router提供了一个About组件示例，为此路由生成单独的块，访问路由时延迟加载，可参阅 Prefetch与Preload

配置相关

Vue-Cli4没有了配置webpack的config与build目录，配置由vue.config.js定义，vue.config.js文件定义于根目录，相关配置信息参阅 Webpack配置

配置代理

module.exports = {
    devServer: {
        proxy: {
            '/': {
                target: 'http://www.example.com',
                 ws: true,
                changeOrigin: true,
                pathRewrite: {}
            }
        }
    }
}