首页 > 其他分享 >vue 环境配置(使用cross-env配置)

vue 环境配置(使用cross-env配置)

时间:2024-01-29 14:47:09浏览次数:22  
标签:vue cross js build env prod config

vue 环境配置(使用cross-env配置)

通过定义不同的打包命令, 更改项目环境变量 。

1、下载 cross-even(可跨平台设置node环境变量)

npm install cross-env --save-dev

2、package.json 文件 查询 scripts,在其中加入如下代码:(其为不同环境的打包命令,可自定义)。

    "build:qa": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"

3、全局变量 process 接收打包时改变的环境变量。

3.1、在conifg文件中建立N(需要的n个环境)个文件夹(例如:test.env.js):【为了环境变量模块化配置】

'use strict'
const merge = require('webpack-merge')
const testEnv = require('./test.env')

module.exports = merge(testEnv, {
  NODE_ENV: '"testing"',
  EVN_CONFIG: '"test"',
  BASE_API:'"https://www.baidu.com/"',
})

3.2 在config文件的 index.js 中 build模块 添加如下:

    prodEnv: require('./prod.env'),
    preEnv: require('./pre.env'),
    testEnv: require('./test.env'),

3.3 在build文件的 webpack.prod.conf文件中修改:【动态获取】

// const env = require('../config/prod.env')  //原来的
const env = config.build[process.env.env_config + 'Env']   //现在动态的

3.4 在build文件的 webpack.prod.conf文件中修改:【build时候的 log】

let spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config + ' mode...')
spinner.start()

3.5 本地测试打包:在config文件的 index.js 中 build模块 修改如下:

 assetsPublicPath: './',

4、使用:打包后全局可使用 process.env。

标签:vue,cross,js,build,env,prod,config
From: https://www.cnblogs.com/caihongmin/p/17994468

相关文章

  • vue3使用自定义指令实现图片懒加载
    //自定义指令app.directive('lazy',{mounted(el,binding){//绑定的元素,绑定的值//IntersectionObserver可以用来自动监听元素是否进入了设备的可视区域之内,而不需要频繁的计算来做这个判断constobserve=newIntersectionObserver(([{isIntersec......
  • Vue模板语法——数据绑定指令
    一、数据绑定指令v-text填充纯文本相比插值表达式更加简洁v-html填充HTML片段存在安全问题本网站内部数据可以使用,来自第三方的数据不可以用v-pre填充原始信息显示原始信息,跳过编译过程(分析编译过程)二、v-text填充纯文本v-text用法在需填充的标签中添加......
  • Vue模板语法——v-once 数据响应式
    一、数据响应式如何理解响应式html5中的响应式:屏幕尺寸的变化导致样式的变化数据的响应式:数据的变化导致页面内容的变化什么是数据绑定数据绑定:将数据填充到标签中v-once只编译一次显示内容之后不再具有响应式功能二、v-once指令v-once应用场景如果显示的......
  • Vue模板语法——v-model 双向数据绑定
    双向数据绑定单向数据绑定是什么?数据模型(Module)和视图(View)之间的单向绑定。需要我们先写好模板,然后把模板和数据(可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。简单的来说就是DOM操作html元素。单向数据绑定的缺点:一旦HTML代码生成好后,就没有办......
  • Vue模板语法——v-on 事件绑定
    一、v-on事件绑定v-on指令用于绑定事件v-on用法转=>最底层的技术渣--Vue基础语法之v-on转=>一瓶怡宝矿泉水--v-on指令直接绑定事件:注意:绑定的事件是对应的方法不是定义在data里面,而是定义在vue实例的methods里绑定的函数可直接绑定函数名——fun,也可以直接调用......
  • Vue模板语法——键盘事件修饰符
    一、键盘修饰符在JavaScript事件中除了前面所说的事件,还有键盘事件,也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难,所以Vue为最常用的键盘事件提供了别名:enter:回车键tab:制表键delete:含delete和backspace键esc:返回键......
  • Vue模板语法——事件修饰符
    一、事件处理如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event,把它传入到methods中的方法中。在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有:......
  • 创建Vue项目,报错spawn yarn ENOENT
    1.使用vue创建项目的时候,报错Error:spawnyarnENOENT1.1用户自己设置了默认的包管理yarn1.2没有安装yarn解决方式1:打开C盘,在C盘里,打开users(用户名)的文件夹,然后在右侧搜索名为.vuerc的文件修改.vuerc文件解决方式2:没有安装yarn,那么直接输入命令npmin......
  • Vue模板语法——v-cloak
    一、什么是指令指令的本质就是自定义属性指令的格式:以v-开始,比如:v-cloak二、v-cloak指令用法插值表达式存在的问题:“闪动”如何解决该问题:使用v-cloak指令解决该问题原理:先隐藏,替换好值后再显示最终的值三、v-cloak指令的用法提供样式[v-cloak]{display:......
  • vue响应性原理
     核心实现类Observer:它的作用是给对象的属性添加getter和setter,用于依赖收集和派发更新Dep:用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个Dep实例(里面subs是Watcher实例数组),当数据有变更时,会通过dep.notify()通知各个watcher。W......