Vue CLI 2 升级至 Vue CLI 3

时间 2019-12-08

标签 vue cli 升级繁體版

原文原文链接

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 及以上。javascript

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

# 安装 >= 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 中加入：html

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

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

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

VUE_APP_KEY=VALUE

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

2.2 多环境配置

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

在使用 npm 命令时，能够经过指定 --mode xxx 来启用某一环境的环境变量。react

注：.env 文件为全部环境的公用环境变量。webpack

2.3 本地多环境配置

在 Vue CLI 3 中，声明了对 .env.*.local 不进行 Git 版本控制。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 语法，须要在 <style> 标签中增长以下属性：

<style scoped lang="scss" type="text/scss">

</style>

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 <Root>)

这是由于 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');

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

Vue CLI 2 升级至 Vue CLI 3

Vue CLI 2 升级至 Vue CLI 3

1. 卸载与安装

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

2.1 环境变量

2.2 多环境配置

2.3 本地多环境配置

3. 静态资源文件

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

5. 添加全局 Scss 文件

6. 调整 ESLint 配置

7. Compiler 模式变动为 Runtime 模式

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

9. 配置 analyzer

10. 引入外部 CDN

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

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

参考连接

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