这次给大家带来vue-cli 3.0.x升级到webpack4后有哪些新特性，vue-cli 3.0.x升级到webpack4后有的注意事项有哪些，下面就是实战案例，一起来看一下。
最近项目正在优化。乘着有时间看了一下 vue-cli3.0.x 使用 。感觉还蛮不错的。 因为之前项目使用的 vue-cli 2 创建的，强行使用 eslint让我们很难受，一些与项目无关的 “build” 和 “config” ，让人看着就有一些不爽 。由于公司环境比较多，需要测试环境的配置。增加了 “”tt”: “node build/tt-build.js”” 。到 3.0.x 应该怎么用？ 带着这些问题来看 3.0.x 感觉就好多了。
1. 官网资料
在学习技术的时候，经常看查看官网的资料。因为那里的资料更新是最快的 。
vue-cli
vue-cli 文档
2. 安装环境
这里犸特头，推荐大家使用 npm install -g @vue/cli ,通过 yarn global add @vue/cli 还需要进行其他设置，还生成一些文件删除几分钟。
npm install -g @vue/cli# oryarn global add @vue/cli# 使用vue命令，创建项目(不同于cli2.0的init，create)vue create my-project
登录后复制
如果 您使用 yarn global add @vue/cli 安装需要 进入 目录 。执行
yarn // 安装项目依赖cd packages/@vue/cli // 目录yarn link //添加 link `vue` 执行指命 。vue create my-project // 创建项目 。
登录后复制
3. 多环境配置
因为公司有 开发环境 ，测试环境，联调环境，线上环境 。减少人为配置，一次配置对原则。所以在2.0.x 增加了“package.json “tt”: “node build/tt-build.js”” 类型的配置，配置不了不少文件。 在 vue-cli 3.0.x 里面支持 “.env” 文件配置 ,我这里增加 “.env.development” ， “.env.production”和“.env.test” 配置 。
1. 基本对应和默认
development is used by vue-cli-service serve production is used by vue-cli-service build test is used by vue-cli-service test
登录后复制
2. 指定配置启动
增加其他配置，需要下面指定配置 。
"dev-build": "vue-cli-service build --mode development",
登录后复制
3.”.env “配置文件编写
配置文件内容格式如下 ，
VUE_APP_*
登录后复制
例如：”.env.production” 内容如下
VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'
登录后复制
4. 调整用环境配置
console.log(process.env.VUE_APP_MOCK_URL);process.env.NODE_ENV // 特定BASE_URL // vue.config.js 配置
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
vue配置怎么请求本地的json数据
pandas+dataframe实现行列选择与切片操作
selenium+cookie跳过验证码登录实现步奏详解
立即学习“前端免费学习笔记（深入）”；
以上就是vue-cli 3.0.x升级到webpack4后有哪些新特性的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2773574.html
