vue多项目配置,vuecli3.0+cross-env配置问题

cross-env相信大家都用过,这里就不过多描述,首先我们来安装cross-env

npm install cross-env 或者yarn add cross-env

安装完成之后就可以在项目中使用,有些脚手架自带有cross-env(Ant-Design-Pro)所以就省去安装了

今天给大家介绍的是vue-cli脚手架3.0+之后cross-env的使用方式

之前一直使用的vue-cli2.0,2.0配置文件很多,在开发和生产配置文件中配置了cross-env中的变量之后就能正常使用了,

但是vue-cli升级之后,文件是零配置,就是没有之前那些个配置文件了,但是我们要修改配置文件怎么办呢,根据官方文档,我们知道是要新建一个vue.config.js来写我的自己的配置

corss-env可以配置多项目和多环境,有时候我们有项目相似的时候为了方便就会用到这种配置

CLIENT_NAME是项目名称,PREFIX是项目运行环境,当然,这是变量,可以自己随意定义没有硬性要求,只要符合变量定义规则就行。

cross-env自定义的变量有了,但是我们必须要能够接收到这个变量,然后通过变量来区分项目和运行环境,不同的项目有不同的配置,

通过我们自定义的变量CLIENT_NAME和PREFIX来控制,因此我们需要拿到在package.json中定义的变量

没做任何操作之前在页面中获取CLIENT_NAME是undefined

因此我们新建一个vue.config.js并在里面写入这样一段代码

这样我们就可以接收到运行项目时候的配置了,

原文地址:https://www.cnblogs.com/gzy-tw/p/12510186.html

时间: 2024-10-11 16:52:01

vue多项目配置,vuecli3.0+cross-env配置问题的相关文章

vue老项目升级vue-cli3.0

第一步我们卸载全局的vue2.0然后: 打开命令行 输入npm install -g @vue/cli-init   这个就是会安装全局的vue3.0版本.安装好之后我们也可以vue -V查看当前vue的版本.我目前安装的3.5.3版本的. 当然这时候会有人想 那我之前vue2.0的项目怎么办?不用急,vue官网给了一个版本之前的桥接工具npm install -g @vue/cli-init 下载完后我们可以打开vue2.0的项目 npm run dev 运行就可以了. 链接(用新版本打开老项

Vue基础项目配置

一,使用Vuejs搭建项目需要一些基础配置,这样能使的编程过程事半功倍 首先下载nodejs,然后使用nodejs使用NPM命令下载VueCli3.0以上的Vue脚手架.通过脚手架可以使用Vue ui图形界面创建项目,也可以使用vue create xxx来使用命令行来创建项目. 创建项目之时最重要的选项就是使用配置文件最好各个配置文件分开,不要集中在<vue.confing.js>. 创建完项目之后启动项目npm run serve. 在项目目录打开一个新的命令提示行来安装Vue的插件和各种

Vue-cli3.0项目下axios请求本地json文件的数据

1. Vue-cli3.0项目节省了很多文件,比如讲vue-cli3.0之前版本的build/dev-server.js配置放在了vue.config.js中. 2. 在Vue-cli3.0项目的vue.config.js或vue-cli3.0之前版本的build/dev-server.js中配置: const express = require('express')const app = express() var singer = require('./src/db/data/singer.

VueCli3.0全栈项目-资金管理系统带权限(node/element/vue)

课程简介:通过本系列课程,可以快速的掌握全栈开发流程, 包括node.js的接口搭建, vue前端项目的构建, element-ui视图的构建. 一套应有尽有的课程! 课程目录:1.Vue全栈-最终成果展示.mp42.Node接口搭建-express搭建服务器.mp43.Node接口搭建-连接MongoDB数据库.mp44.Node接口搭建-搭建路由和数据模型.mp45.Node接口搭建-搭建注册接口并存储数据.mp46.Node接口搭建-使用全球公认头像gravatar.mp47.Node接口

vue-cli3.0配置详解

这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下. 新建项目 1 2 3 4 5 6 7 8 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build 打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且

vue-cli3 vue.config.js配置

vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的配置,

vue-cli3.0 脚手架搭建项目的过程详解

1.安装vue-cli 3.0 ? 1 2 3 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 ? 1 vue create --help 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetName>       忽略提示符并使用已保存的或

vue-cli3.0启动项目,在局域网内其他电脑通过自己ip访问

最近一直在使用vue-cli3.0做项目, package.json中配置后,自启动项目,也就没留意过小黑窗, "scripts": { "serve": "vue-cli-service serve --open", // 自启动浏览器 "build": "vue-cli-service build" }, 启动后发现,如下,不仅有Local,还有 Network App running at: - Lo

vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;

源文件链接: https://www.cnblogs.com/taohuaya/p/10274993.html 如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem . 为什么这三个中要推荐  postcss-plugin-px2rem呢? 因为 postcss-plugin-px2rem 这个插件  配置选项上有  exclude 属性,它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换.