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

本文详细介绍了Vue CLI 2升级到Vue CLI 3的步骤和注意事项。对于想要进行Vue项目升级的朋友们来说，这是一篇非常有价值的参考文章。

一、卸载旧版Vue CLI并安装新版

我们需要卸载旧版本的Vue CLI，并安装版本的Vue CLI。可以通过npm命令来完成这个操作。注意升级Node.js版本至8.9以上，因为Vue CLI 3需要较高版本的Node.js支持。

二、环境变量与多环境配置

在Vue CLI 3中，环境变量的配置变得更加便捷。我们可以通过新建.env文件来定义环境变量，并且支持多环境配置。在项目中，可以根据不同的环境，使用不同的环境变量。还提供了本地多环境配置的支持，方便我们管理本地开发环境。

三、静态资源文件的调整

Vue CLI 3.x将默认资源文件根路径改为了/public目录，因此需要调整静态资源文件的存放位置和引用方式。

四、在WebStorm中配置对@符号的支持

在JetBrains系列的IDE中，默认无法对Vue指定的@符号进行正确的路径识别。为了解决这个问题，我们可以在项目根目录下创建webpack.config.js文件，并配置alias来指定@符号的路径。之后，在IDE中指定该文件路径，便能正确识别@所表示的路径了。

五、添加全局Scss文件

在前端项目中，我们经常需要使用相同的主题色。为了管理和使用这些变量，我们可以在根目录下创建vue.config.js文件，并在其中配置css的loaderOptions来引入全局的Scss文件。这样，我们就能在任何Vue组件中使用这些变量了。

1. 在.vue文件中使用SCSS语法

想要在.vue文件中使用SCSS语法吗？只需在

```

这样，你就可以在Vue组件中直接编写SCSS代码了。

2. 调整ESLint配置

ESLint很严格，但有时我们需要保留一些“暂时用不上”的变量。为此，我们调整了.eslintrc.js文件，对一些规则进行了定制。例如：

```json

{

// ...其他配置

rules: {

'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境禁用console，开发环境则不限制

'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 同上

'vue/no-unused-vars': 'off', // 关闭未使用变量的警告

'vue/no-empty-pattern': 'off' // 关闭空模式警告

}

// ...其他配置

}

```

这样，ESLint就不会再为这些暂时未使用的变量发出警告了。

3. Compiler模式变更为Runtime模式

升级到Vue CLI 3后，你可能会遇到这样的报错信息：

`[Vue warn]: You are using the runtime-only build of Vue where the template piler is not available.`

这是因为Vue 3默认使用的是运行时模式。我们只需修改main.js文件，像下面这样：

```javascript

new Vue({

router,

store,

render: h => h(App)

}).$mount('app'); // 使用render函数来挂载Vue实例到DOM上。这是运行时模式的常见做法。

``` 这样就解决了这个问题。

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

如果你像这样引入lodash： `import _ from 'lodash';` ，那么即使只使用了其中的_.get()方法，也会加载整个lodash库。为了解决这个问题，我们可以配置babel来模块化加载lodash。首先安装一个依赖： `npm install babel-plugin-lodash --save-dev` ，然后在babel.config.js中添加相应的配置。这样，即使按照上述方式引入lodash，也只会加载需要的模块部分。

5. 配置analyzer

为了优化项目加载速度，我们可以使用analyzer来分析项目编译后的文件组成。首先安装依赖 `npm install webpack-bundle-analyzer --save-dev` ，然后在vue.config.js中进行配置。之后在package.json中添加新的命令，执行特定的语句来查看项目编译后的文件大小组成。这样，你就可以清晰地看到哪些文件占用了大量空间，从而进行优化了。

如果你不希望安装`webpack-bundle-analyzer`依赖，有一种简洁的方式可以分析你的Vue项目。只需执行`npm run analyze`命令，就能在`/dist`文件夹下生成一个`report.html`分析报告页面。通过这个页面，你可以直观地了解你的项目构建情况。

引入外部CDN加速加载

我们可以利用CDN来加速部分第三方依赖的加载速度，而不是将它们全部打包在一起。在项目中，如果你需要通过script标签引入一些.js文件，可以在`vue.config.js`文件中进行如下配置：

```javascript

module.exports = {

// 其他配置...

configureWebpack: {

externals: {

"echarts": "echarts" // 这里以echarts为例

}

},

// 其他配置...

}

```

完成以上配置后，你就可以在需要的地方通过`import echarts from 'echarts'`的方式使用echarts了。

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

在执行`npm run build`时，你可能会看到一条关于资产文件大小超过推荐限制的警告信息。如果你想忽略这条警告，可以在`vue.config.js`中添加以下配置：

```javascript

module.exports = {

// 其他配置...

performance: {

hints: false // 忽略性能提示

}

// 其他配置...

};

```添加这段配置后，那条警告信息就不会再出现了。希望这些小技巧能对大家的学习有所帮助，也请大家多多支持我们的分享。更多有关Vue的学习资源和教程，敬请关注狼蚁SEO，让我们一起学习，共同进步。以上内容已经通过Cambrian系统渲染完毕，如有任何疑问或建议，欢迎联系我们。