东莞建设网站企业沟通平台,山西建设集团网站,奇人网站,wap端是指手机端吗cross-env 与 vue-cli-service 的区别 一、cross-env用法多环境基本内容配置 #xff08;非必要#xff0c;全局变量的一种方式#xff09; 二、vue-cli-service#xff1a;用法 一、cross-env
它是为了解决跨平台环境变量设置的问题而开发的。
cross-env是一个用于设置跨… cross-env 与 vue-cli-service 的区别 一、cross-env用法多环境基本内容配置 非必要全局变量的一种方式 二、vue-cli-service用法 一、cross-env
它是为了解决跨平台环境变量设置的问题而开发的。
cross-env是一个用于设置跨平台环境变量的npm包。它解决了不同操作系统之间环境变量设置语法不一致的问题使得开发者可以编写出跨平台的命令。以下是cross-env的用法、使用场景以及如何判断其是否使用成功
用法
安装cross-env
首先你需要将cross-env安装到你的项目中。可以通过npm进行安装
npm install cross-env --save-dev在package.json中定义npm脚本
安装完成后你可以在package.json文件的scripts部分定义一个使用cross-env的脚本。例如
scripts: {dev: cross-env NODE_ENVdevelopment vue-cli-service serve,build: cross-env NODE_ENVproduction vue-cli-service build
}在这个例子中dev 脚本使用 cross-env 来设置 NODE_ENV 环境变量为 dev 。
然后就可以用到其他做一个判断例如
let env process.env;
console.log(env);
if (env.NODE_ENV development) {//我的本地后端api地址baseUrl http://127.0.0.1:5660/portalwork-saas-gateway//其他的一些参数....
}else if (env.NODE_ENV production) {}else if(env.NODE_ENV test){}else{}多环境基本内容配置 非必要全局变量的一种方式
这个非必要看你个人情况该处只是实现全局变量的一种方式
在 package.json 文件中添加各环境的配置如下
envConfig: {dev: {API: http://dev,IS_DEBUG: true},test: {API: http://test,IS_DEBUG: true},release: {API: http://release,IS_DEBUG: true},build: {API: http://build,IS_DEBUG: true}
}
如需要配置其他内容和API同级即可。 package.json 修改后的完整内容如下
{name: my-vue2,version: 0.1.0,private: true,scripts: {dev: cross-env ENV_KEYdev vue-cli-service serve,test: cross-env ENV_KEYtest vue-cli-service build,release: cross-env ENV_KEYrelease vue-cli-service build,build: cross-env ENV_KEYbuild vue-cli-service build},envConfig: {dev: {API: http://dev,IS_DEBUG: true},test: {API: http://test,IS_DEBUG: true},release: {API: http://release,IS_DEBUG: true},build: {API: http://build,IS_DEBUG: true}},dependencies: {axios: ^1.4.0,core-js: ^3.8.3,element-ui: ^2.15.13,vue: ^2.6.14,vue-router: ^3.0.1,vuex: ^3.0.1},devDependencies: {babel/core: ^7.12.16,vue/cli-plugin-babel: ~5.0.0,vue/cli-plugin-eslint: ~5.0.0,vue/cli-service: ~5.0.0,cross-env: ^7.0.3,eslint: ^7.32.0,eslint-plugin-vue: ^8.0.3,image-minimizer-webpack-plugin: ^3.8.3,imagemin: ^8.0.1,imagemin-pngquant: ^9.0.2,less: ^4.2.0,less-loader: ^11.1.3,vue-template-compiler: ^2.6.14},browserslist: [ 1%,last 2 versions,not dead]
}通过使用cross-env工具配置了环境变量ENV_KEY后我们可以在vue.config.js文件中使用process.env.ENV_KEY来获取该环境变量的值。接着可以根据获取到的值从package.json文件中获取对应的配置内容并将其存储在全局变量中从而实现多环境的配置。
webpack.DefinePlugin是 Webpack 插件之一用于在构建过程中创建全局变量。它允许在代码中使用这些全局变量可以在构建时将它们替换为具体的值。
在你的项目根目录下找到 vue.config.js 文件根据以下内容进行修改
const webpack require(webpack)
const packageConfig require(./package.json)//假设使用的是“dev” 来启动项目的那 该处的 ENV_CONFIG 为
// {API: http://dev,IS_DEBUG: true}
const ENV_CONFIG packageConfig.envConfig[process.env.ENV_KEY]plugins: [// 环境配置全局变量new webpack.DefinePlugin({ process.env.config: JSON.stringify(ENV_CONFIG) })
]vue.config.js 修改后的完整内容如下
const path require(path)
const webpack require(webpack)
const ImageMinimizerPlugin require(image-minimizer-webpack-plugin) // 压缩图片插件
const packageConfig require(./package.json)const ENV_CONFIG packageConfig.envConfig[process.env.ENV_KEY]module.exports {// 静态资源访问路径, 默认是 /publicPath: ./,// 指定构建后的输出目录默认是 distoutputDir: dist,// 是否每次保存时 lint 代码,可选值 (boolean | warning | default | error) 默认 defaultlintOnSave: default,// 配置开发服务器选项devServer: {// 开发服务器启动时是否自动打开浏览器open: false,// 端口号port: 3000},// 配置css相关选项css: {// 开启 source mapsourceMap: process.env.NODE_ENV development},// webpack 的配置对象configureWebpack: {// 配置需要使用的 webpack 插件plugins: [// 环境配置全局变量new webpack.DefinePlugin({process.env.config: JSON.stringify(ENV_CONFIG)}),// 压缩图片new ImageMinimizerPlugin({minimizer: {// 指定了采用哪种图片压缩实现方式implementation: ImageMinimizerPlugin.imageminGenerate,// 压缩插件选项options: {plugins: [pngquant] // 用于对 PNG 图片进行压缩}}})],// 配置Webpack模块解析的方式使得你可以通过模块名字而不是相对路径来引入模块resolve: {// 设置路径别名alias: {: path.resolve(src),public: path.resolve(public),img: path.resolve(src/assets/images),js: path.resolve(src/assets/scripts),css: path.resolve(src/assets/styles)}}}
}
webpack.DefinePlugin 是 Webpack 中的一个插件它允许你在编译时创建配置的全局常量。这意味着你可以在源代码中使用这些常量而 Webpack 会在编译时将它们替换为具体的值。
假设你有以下的源代码
if (process.env.config.IS_DEBUG) { console.log(Debug mode is on!);
} fetch(${process.env.config.API}/data) .then(response response.json()) .then(data console.log(data));当 Webpack 编译这段代码时它会将其转换为
if (true) { console.log(Debug mode is on!);
} fetch(https://api.example.com/data) .then(response response.json()) .then(data console.log(data));注意process.env.config.IS_DEBUG 和 process.env.config.API 都被替换为具体的值。 无论是 vue-cli-service serve启动 还是 vue-cli-service build打包 DefinePlugin 都会执行替换操作。
这种方法的一个主要优点是它可以帮助你避免在运行时暴露敏感的配置信息因为这些信息在编译时就已经被替换掉了。
二、vue-cli-service
vue-cli-service 是随着 Vue CLI 的发展而出现的。Vue CLI 是一个基于 Vue.js 的全功能脚手架它提供了大量的插件和工具帮助开发者快速搭建 Vue.js 项目并进行高效开发。Vue CLI 的出现极大地简化了 Vue.js 项目的创建和管理过程而 vue-cli-service 作为 Vue CLI 的核心服务为项目提供了开发服务器、构建工具以及其他实用功能。
Vue CLI 的历史可以追溯到 Vue.js 项目的早期发展。随着 Vue.js 的流行和社区的发展对于一套统一的、易用的项目创建和管理工具的需求逐渐增加。因此Vue 团队和社区成员开始合作开发 Vue CLI而 vue-cli-service 作为其中的一部分也随之出现。
vue-cli-service 是 Vue.js 的官方命令行工具主要用于在 Vue CLI 创建的项目中执行各种开发和管理任务。下面是关于 vue-cli-service 的用法、使用场景以及如何判断其是否使用成功的信息。
用法
在 package.json 文件里面的体现一般为
scripts: {serve: vue-cli-service serve,build: vue-cli-service build,lint: vue-cli-service lint},而在这些命令会存在一个重要的概念 ** 模式 **
** 模式 **是 Vue CLI 项目中一个重要的概念。默认情况下一个 Vue CLI 项目有三个模式
development 模式test 模式production 模式
vue-cli-service serve 默认使用的是 development 模式 vue-cli-service test:unit 默认使用的是 test 模式 vue-cli-service build 和 vue-cli-service test:e2e 默认使用的是 production 模式 vue-cli-service lint 则用于代码质量检查。
你可以通过传递 --mode 选项参数为命令行覆写默认的模式。 例如如果你想要在构建打包命令中使用开发环境变量
vue-cli-service build --mode development参考文章 【1】第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin https://blog.csdn.net/mebell/article/details/132983836 【2】process.env环境变量配置方式配置环境变量区分开发环境和生产环境 https://blog.csdn.net/duansamve/article/details/122645027
