扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是有关vue-cli3.0.x怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都网站建设哪家好,找成都创新互联公司!专注于网页设计、重庆网站建设、微信开发、微信平台小程序开发、集团成都定制网站等服务项目。核心团队均拥有互联网行业多年经验,服务众多知名企业客户;涵盖的客户类型包括:混凝土搅拌罐车等众多领域,积累了大量丰富的经验,同时也获得了客户的一致称赞!
安装环境
这里犸特头,推荐大家使用 npm install -g @vue/cli ,通过 yarn global add @vue/cli 还需要进行其他设置,还生成一些文件删除几分钟。
npm install -g @vue/cli # or yarn 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 // 创建项目 。
多环境配置
因为公司有 开发环境 ,测试环境,联调环境,线上环境 。减少人为配置,一次配置对原则。所以在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-cli3.0.x怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流