欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue CLI2升级至Vue CLI3的方法步骤

程序员文章站 2023-12-09 18:55:03
以下备忘升级至 vue cli 3.x 版本后,将项目目录改为新结构时所需做的一些改动。 1. 卸载与安装 npm uninstall vue-cli -g...

以下备忘升级至 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 中指定该文件路径:

Vue CLI2升级至Vue CLI3的方法步骤

之后,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 devnpm 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
  }
  
  ...
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。