Vue CLI 2 升级至 Vue CLI 3

Vue CLI 2 升级至 Vue CLI 3

以下备忘升级至 Vue CLI 3.x 版本后，将项目目录改为新结构时所需做的一些改动。

1. 卸载与安装

npm uninstall vue-cli -g

npm install -g @vue/cli

注：若要使用 Vue CLI 3，需将 Node 版本升级至 8.9 及以上。

当使用 nvm 管理 node 版本时，可以使用如下方式切换至需求的 Node 版本：

# 安装 >= 8.9 的某个版本
nvm install 8.12.0

# 在当前 session 中使用该版本
nvm use 8.12.0

# 设置默认的 Node 版本
nvm alias default 8.12.0

2. 环境变量与多环境配置

2.1 环境变量

在 Vue CLI 2.x 中，如果需要定义环境变量，需要在 build/webpack.dev.conf.js 中加入：

plugins: [
    new webpack.DefinePlugin({
      'process.xxx': "'some value'",
    })
]

而在 Vue CLI 3.x 中，我们可以使用配置文件的方式便捷的进行配置：

在项目中新建 .env 文件，写入

VUE_APP_KEY=VALUE

即可在需要的地方使用 process.env.VUE_APP_KEY 调用了。注意，这里环境变量必须以 VUE_APP_ 开头。

2.2 多环境配置

配置文件同样支持多环境，即 .env.development 文件表示 development 环境；.env.production 文件表示 production 环境。

在使用 npm 命令时，可以通过指定 --mode xxx 来启用某一环境的环境变量。

注：.env 文件为所有环境的公用环境变量。

2.3 本地多环境配置

在 Vue CLI 3 中，声明了对 .env.*.local 不进行 Git 版本控制。

对于一些无需上传到代码仓库的配置，可以使用这一方式。

3. 静态资源文件

Vue CLI 3.x 将默认资源文件根路径放到了 /public 目录下，而默认精简掉了 2.x 版本中的 /static 目录。因而之前放置于 /static 目录中的资源文件及其引用位置需要做些调整。

4. 在 WebStorm 中配置对 @ 符号的支持

默认情况下，JetBrains 系列的 IDE 无法对 Vue 指定的 @ 符号进行正确的路径识别。此时我们可以在项目根文件夹下创建 webpack.config.js 文件，并写入：

module.exports = {
    resolve: {
        alias: {
            '@': require('path').resolve(__dirname, 'src')
        }
    }
};

之后，在 IDE 中指定该文件路径：

之后，IDE 便能正确识别 @ 所表示的路径了。

5. 添加全局 Scss 文件

在前端项目中，经常会用到相同的主题色。此时，我们需要存储这些变量，且将其全局引入。

在 Vue CLI 3 中，我们可以在根目录下新建一个 vue.config.js 文件，写入如下内容:

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `@import "@/styles/settings.scss";`
            }
        }
    }
};

此时，settings.scss 该文件中的变量值便能在任意 Vue 组件中使用了。

当然，如果要在 .vue 文件中使用 SCSS 语法，需要在

6. 调整 ESLint 配置

ESLint 对未使用的变量和函数参数都做了限制，但原项目中确实有些地方需要保留这些 “暂时用不上” 的变量，因而这里对默认的 ESLint 设置做了调整，即修改 .eslintrc.js 文件：

{
    ...
    
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'vue/no-unused-vars': 'off',
        'vue/no-empty-pattern': 'off'
    },
    
    ...
}

7. Compiler 模式变更为 Runtime 模式

在升级至 Vue CLI 3 之后，直接运行可能会出现如下报错：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in )

这是因为 3.x 版本默认使用的是运行时模式，需要对 main.js 文件进行修改：

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

将其改为上述方式即可。

8. 配置 lodash 使其模块化加载

在项目中，如果使用如下方式引入 lodash：

import _ from 'lodash';

那么，即使只使用了其中的 _.get() 方法，也会将全部的 lodash 依赖压缩到 .js 文件中。这不是我们期望的。

此时，我们可以通过如下方式，使其能够在这种引入方式下，也能自动实现模块加载：

首先，安装如下依赖：

npm install babel-plugin-lodash --save-dev

然后在 babel.config.js 中添加如下内容：

module.exports = {
    ...
    
    plugins: [
        'lodash'
    ]
    
    ...
};

9. 配置 analyzer

我们可以使用 analyzer 分析项目编译后的文件组成，以便进行加载速度优化。

首先安装依赖：

npm install webpack-bundle-analyzer --save-dev

然后在 vue.config.js 中添加如下配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    ...
    
    configureWebpack: {
        plugins: [
            new BundleAnalyzerPlugin()
        ]
    },
    
    ...
};

然后在 package.json 中添加新的命令：

"analyze": "npm_config_report=true npm run build"

之后，便可以执行以下语句来查看项目编译后文件大小组成了：

npm run analyze

注：采用这种方式后，每次 npm run dev 或 npm run build 都会自动弹出分析页面。

如果不想这么做，可以直接使用如下方式（ 无需安装 webpack-bundle-analyzer 依赖 ）：

"analyze": "vue-cli-service build --report"

当执行 npm run analyze 后，/dist 文件夹下会生成 report.html 分析报告页面。

10. 引入外部 CDN

我们可以使用 CDN 来加速部分第三方依赖的加载速度，而不是把它们全部打包到一起。

在使用 script 标签引入需要的 .js 文件后，在 vue.config.js 文件增加如下配置：

module.exports = {
    ...
    
    configureWebpack: {
        externals: {
           "echarts": "echarts",
        }
    },
    
    ...
}

即可在需要的地方按如下方式使用了：

import echarts from 'echarts';

11. 忽略编译文件大小限制警告

当执行 npm run build 时，会出现警告信息：

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

此时，我们可以在 vue.config.js 中添加如下配置，忽略这条警告信息：

module.exports = {
    ...
    
    performance: {
        hints: false
    }
    
    ...
};

12. 使用 webpackChunkName 注释减少编译的文件个数

为了避免将所有组件打包在一起而造成单个文件过大，通常我们会使用按需加载的方式引入组件：

const ComponentXXX = () => import('../../pages/xxx/index.vue');

在 Vue CLI 3 默认情况下，每个如上方式引入的组件会被编译为一个单独的 JS 和一个单独的 CSS 的文件。

如果不加处理，当采用如上方式引入的组件数量增多时，可能会在编译后，得到几百个小文件，而每个文件的大小可能还不到 1 KB。

虽然小文件加载速度快，但由于浏览器每次能建立的连接数量有限，大量的小文件同样会导致首次加载变慢。

此时，我们可以使用如下的方式，将多个组件打包成一个文件：

const ComponentXXX = () => import(/* webpackChunkName: "xxx" */ '../../pages/xxx/index.vue');

如此，我们便可以在保证分块打包的前提下，减少编译的小文件数量。

参考链接

1. https://webpack.js.org/config...
2. npm run build: WARNING in asset size limit: The following asset(s) exceed the recommended size limit - yun_hou的博客 - CSDN博客
3. https://stackoverflow.com/que...
4. vue-cli3使用cdn方式引入moment.js - Happy222~ - 博客园
5. https://github.com/facebook/c...
6. mini-css-extract-plugin Conflicting order between 和Entrypoint mini-css-extract-plugin = * - dk123sw的博客 - CSDN博客
7. You are using the runtime-only build of Vue where the template compiler is not available. Either pre - 积少成多 - CSDN博客
8. Vue CLI 配置 webpack-bundle-analyzer 插件 - 前端人公众号作者 - CSDN博客
9. vue-cli3 配置 webpack-bundle-analyzer 插件 - 简书
10. https://cli.vuejs.org/zh/guid...
11. javascript - vue-cli3 npm run build --report没有生成那种分析图 - SegmentFault 思否
12. vue-cli3实现分环境打包步骤（给不同的环境配置相对应的打包命令） - Happy222~ - 博客园
13. vue-cli如何添加多种环境变量 - 木石心 - 博客园
14. Vue CLI 3 环境变量和模式配置实践与源码分析 - 个人文章 - SegmentFault 思否
15. nvm 设置 nodejs 默认版本 - Joans - 博客园
16. vue-cli3设置sass/scss全局变量 - 游龙翔隼 - 博客园
17. https://medium.com/@markni/ma...
18. https://forum.vuejs.org/t/how...
19. https://gist.github.com/Justi...
20. 一步一步的了解webpack4的splitChunk插件 - 掘金
21. Disable code splitting in @vue/cli 3 - Get Help - Vue Forum
22. vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure() - 前端技术 - SegmentFault 思否