Vue生产和开发环境如何切换及过滤器的使用

目录
  • 一、生产环境，开发环境切换
    • 第一种方法：通过配置.env文件来实现
    • 第二种方法
  • 二、过滤器
  • 三、moment时间库使用

一、生产环境，开发环境切换

开发环境：开发环境就是在 /config/index.js下配置proxyTable
生产环境：打包项目后代理就失效啦，所以再生产环境下要重新配置一下

第一种方法：通过配置.env文件来实现

参考：https://cli.vuejs.org/zh/guide/mode-and-env.html

第二种方法

第一步：通过创建不同环境js文件，再通过cross-env来切换

 config
    dev.js
    prod.js

dev.js
module.exports = {
  BASE_URL: "https://test.365msmk.com"
};

prod.js

module.exports = {
  BASE_URL: "https://www.365msmk.com"
};

第二步：安装cross-env并在package.json中配置要传递的参数

安装指令：npm install cross-env -D

package.json中配置

"scripts": {
    "serve": "cross-env BUILD_ENV=dev vue-cli-service serve",
    "build": "cross-env BUILD_ENV=prod vue-cli-service build"
  }

第三步：修改vue.config.js添加对webpack的配置

module.exports = {
 .....
  chainWebpack: config => {
    config.plugin("define").tap(args => {
      args[0]['process.env'].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV);
      return args;
    });
  }
};

在业务代码做环境的切换

//读取process.env常量对象中的BUILD_ENV
const envType = process.env.BUILD_ENV;

const urlObj = require(`../config/${envType}.js`);

//创建一个axios实例
const service = axios.create({
  baseURL: urlObj.BASE_URL + vipUrl
});

二、过滤器

1.全局过滤器
定义：

Vue.filter('过滤器名称',function(a,b,c) {
  //....

 return ...

})

使用：

{{ num | 过滤器名称(v1,v2) }}

2.局部过滤器

3.总结：过滤器使用场景：用于将后台数据处理成用户最终显示的数据格式

例如：性别，支付状态，物流状态，时间戳。。。。。。

三、moment时间库使用

moment官网：momentjs.cn/docs/

安装指令：npm i moment

格式： moment(时间戳).format("YYYY年MM月DD日，HH时mm分SS秒");

格式显示：http://momentjs.cn/docs/#/displaying/

针对开发环境和生产环境目前正在奋力学习当中，总结每一天，进步每一天，早日进入IT行业的领军中。

到此这篇关于Vue生产和开发环境如何切换及过滤器的使用的文章就介绍到这了,更多相关Vue生产开发环境切换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 全局环境切换问题

    前端开发经常碰到切换环境的情况, 测试环境,开发环境,正式环境(以及图片环境~~) 1.我们在utils中创建一个global.js文件 /** @Author: faith 全局常量对象 create by faith 2019-10-23 @return 全局常量对象 * export function global() { const localGlobal = { PORTAL: 'http://test.域名.com:1024', // 前台 CONSOLE: 'http://test

  • Vue生产和开发环境如何切换及过滤器的使用

    目录 一.生产环境,开发环境切换 第一种方法:通过配置.env文件来实现 第二种方法 二.过滤器 三.moment时间库使用 一.生产环境,开发环境切换 开发环境:开发环境就是在 /config/index.js下配置proxyTable 生产环境:打包项目后代理就失效啦,所以再生产环境下要重新配置一下 第一种方法:通过配置.env文件来实现 参考:https://cli.vuejs.org/zh/guide/mode-and-env.html 第二种方法 第一步:通过创建不同环境js文件,再通

  • 详解用Docker搭建Laravel和Vue项目的开发环境

    本文介绍了用Docker搭建Laravel和Vue项目的开发环境,分享给大家,具体如下: 在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速.轻量级.不依赖本地电脑所安装的任何开发套件的可复制的Laravel和Vue项目的开发环境(开发环境的所有依赖都安装在Docker构建容器里),加入Vue只是因为有的项目里会在Laravel项目中使用Vue做前后端分离开发,开发环境中需要安装前端开发需要的工具集,当然前后端也可以分成两个项目开发,这个话题不在本篇文章的讨论范围内. 所以我们的目标

  • 打通前后端构建一个Vue+Express的开发环境

    打通前后端构建一个Vue+Express的开发环境

    前端做多了,自然就会想往后端伸手.更何况现在有了Node和Express,让前端做后端开发的学习降低了不少. 最近正好揽下了一个 Vue + Express + mysql 的小项目.项目开始时是前后端分开开发的,但是当后台做好一部分要进行连接测试时问题就来了.前端部分在每次修改过就需要build一次,而后台也每次需要重启一次服务器才能进行调试.可想而知,这样的开发和调试效率是很低的.在这么煎熬着做了一个功能之后,实在受不了.于是便想有没有什么方法可以热更新开发前后端.毕竟 vue-cli 在调

  • springboot多模块多环境配置文件问题(动态配置生产和开发环境)

    springboot多模块多环境配置文件问题(动态配置生产和开发环境)

    第一种情况: spring.profiles.active=环境变量 配置两个环境的,可根据实际需要增加环境模式(开发环境dev,测试环境test,回归坏境retu,预生产环境pre,生产环境prod,等等) dev代表开发环境: prod代表生产环境 pom.xml里面配置profiles: <profiles> <profile> <id>dev</id> <activation> <!-- 默认激活--> <activeB

  • 详解基于webpack和vue.js搭建开发环境

    详解基于webpack和vue.js搭建开发环境

    前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着"不听老人言,吃亏在眼前"的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理--不忍直视 2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的-- 3.数据的渲染使用模板引擎,

  • 详解vue+vuex+koa2开发环境搭建及示例开发

    写在前面 这篇文章的主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用. 搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径,而不是直接在前端写几个死数据.即,模拟后端接口. 当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点. 包括: koa2的知识点 node的知识点 跨域问题 fetch的使用 axios的使用 promise的涉及 vuex -> st

  • 详解vue+axios给开发环境和生产环境配置不同的接口地址

    为什么要配置不同的接口地址 在开发过程中,前端请求访问的是自己本机启动的后台服务,此时涉及到跨域(因为端口不一样),所以在config/index.js文件中配置了代理 //检查某个文件是否存在 try { fs.statSync(path.join(__dirname, '../proxy/' + templatedir + '.json')) //如果可以执行到这里那么就表示存在了 console.log(124) proxyTable = require('../proxy/' + tem

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

  • 利用Docker搭建Laravel开发环境的完整步骤

    前言 在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速.轻量级.不依赖本地电脑所安装的任何开发套件的可复制的Laravel和Vue项目的开发环境(开发环境的所有依赖都安装在Docker构建容器里),加入Vue只是因为有的项目里会在Laravel项目中使用Vue做前后端分离开发,开发环境中需要安装前端开发需要的工具集,当然前后端也可以分成两个项目开发,这个话题不在本篇文章的讨论范围内. 所以我们的目标是: 不在本地安装Mamp/Wamp这样的软件 不使用类似Vagrant这样的虚拟机

  • vue中控制mock在开发环境使用,在生产环境禁用方式

    vue中控制mock在开发环境使用,在生产环境禁用方式

    目录 vue控制mock在开发环境使用,在生产环境禁用 说下原因 解决方案 vue中使用mock(常用方式) 前期准备 安装axios和mock.js插件 在main.js中引入 编写mock.js 调用 成功 vue控制mock在开发环境使用,在生产环境禁用 说下原因 mock拦截所有的axios请求,根据请求,做出相应的响应.平时前后端分离开发,我们使用mock获得相应的数据,但当和后端联调的时候,不禁用mock,就无法获得后端数据. 解决方案 第一步.我们设置mock在开发developm

随机推荐