Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue生产环境和开发环境的配置

Vue生产环境和开发环境的配置

原创
作者头像
前端小tips
发布于 2021-11-30 01:37:30
发布于 2021-11-30 01:37:30
2.1K00
代码可运行
举报
文章被收录于专栏:前端文章小tips前端文章小tips
运行总次数:0
代码可运行

1、创建开发环境和生产环境的文件

根据vue cli 官网(https://cli.vuejs.org/zh/guide/mode-and- env.html#%E6%A8%A1%E5%BC%8F)的解释,我们可以直接在src同级目录下创建.env.development和.env.production,这个两个文件

2、在不同的环境变量文件中放置我们需要的参数

.env.production 这个文件配置的是生产环境的变量,放置线上访问的路径

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
VUE_APP_URL=https://cli.vuejs.org/ 

.env.development 这个文件配置的是开发环境的变量,可以让我们在本地访问线上的路径

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
VUE_APP_URL=https://cli.vuejs.org/ 

3、根据vue cli 官网的描述,创建vue.config.js文件配置参数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 这个地方的参数配置可以参照vue cli https://cli.vuejs.org/zh/config/#全局-cli-配置,根据项目需要进行配置
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path' : './', 
    outputDir: 'dist',
    devServer: {
        proxy: {
            '/api': {
                target: '线上接口地址',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'  // 根据之前vuejs的配置,用来拿掉URL上的(/api),但是暂时没有什么效果
                }
            },
        }
    }
}

4、创建mock.api.js文件,用来集中放置接口

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Vue from 'vue';
const api = process.env.VUE_APP_URL ? process.env.VUE_APP_URL : '/api';export const APIROUTER = {
        'login':  api + '/admin/login.do', // 登录
}Vue.prototype.$api_router = APIROUTER; // 直接声明出去

5、在main.js 中引入 mock.api.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import './mock.api'; // 接口API

6、使用api接口

在components文件夹下创建login.vue

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
  export default{
    mounted() {
      console.log(this.$api_router.login); // 打印出登录接口的路径
    },
  }
</script>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
作者已关闭评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue3 转
2018年08月25日 14:08:31  素燃 阅读数:2600
双面人
2019/04/10
6190
vue3
                                                                            转
vue cli3 开发环境与生产环境配置(一)
初始化项目 vue create vue-asgisn cd vue-asgisn npm run serve 一、 已经初始化项目后, 为了开发方便以及维护, 新增一些文件夹 - store
yangdongnan
2019/04/22
5.8K0
vue cli3 开发环境与生产环境配置(一)
Vue4.x配置env开发环境、测试环境、生产环境
配置完成重新npm run serve启动 打印process.env看到自己的配置项
明知山
2020/09/02
1.3K0
vue3+element-plus+router+vuex+axios从零开始搭建(2)
vue-cli 3.0x与vue-cli 2.0x最主要的区别是项目结构目录精简化,这也带来了许多问题,很多配置需要自己配置,
solate
2021/06/21
1.5K0
vite开发环境、生产环境配置
一个项目可能会有开发版本、上线版本、测试版本等等多个版本,不同的环境会有不同请求api接口,就需更改一些基本配置,这时候就显得很麻烦,所以这里就使用了环境变量。我们只需做简单的配置,把环境状态切换的工作交给代码。
小蔚
2023/11/03
2.3K0
vite开发环境、生产环境配置
【Vue工程】004-配置环境变量、端口、代理、打包等
**官方文档: **环境变量和模式 https://cn.vitejs.dev/guide/env-and-mode.html
訾博ZiBo
2025/01/06
1110
react配置生产环境和测试环境地址
写在前面 之前一直写关于vue的文章,经常看我文章的可能从上篇文章就知道了我已经不写vue了,以后就写react了,会持续更新,今天说一下我搭建框架的时候配置不同环境的步骤,大家可以借鉴以下,也可以自己搞一下! 在项目根目录创建两个环境文件 .env.development .env.production 文件内容 .env.developemnt REACT_APP_BASE_URL = 'https://test.com' REACT_APP_ENV = 'development' .env.pr
何处锦绣不灰堆
2021/05/06
2.8K0
Vue(CLI3.0)多环境配置问题2020
vue-cli3.0多环境配置 通常开发运行项目时候只需要一个'development'(开发环境),打包时候却需要打'n种环境'(测试环境、uat环境、正式环境)的包,废话不多说进入主题,配置打多种 环境的包 第一步 在根目录下创建'.env.development'(开发环境)、'.env.production'(生产环境)', 这里的'.env'后面的名字可以自己随便起,但是默认是有2种环境(development、production),如果想多增加别的环境就手动创建新的.env文件即可
程序员不务正业
2020/05/26
6830
vue 解决跨域问题(开发环境)[通俗易懂]
不同源就是跨域,比如你的前端为localhost:9528,后端为localhost:8080,此时前端去访问后端接口就会产生跨域问题,因为端口不同。
全栈程序员站长
2022/11/04
5.3K1
我的Vue不小心跨域了o(╥﹏╥)o 干它
好久不见,今天想写的是前段时间碰到的一个小问题。其实故事背景是前端的同学跟我说他们前端请求不了我后端的数据,说是跨域了。
Python进击者
2020/08/17
1.1K0
【前端配置篇】vue项目之.env系列文件配置详解:.env文件配置全局环境变量
vue 会根据启动命令自动加载相对应的环境配置文件。vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”
江一铭
2022/06/17
17.8K0
【前端配置篇】vue项目之.env系列文件配置详解:.env文件配置全局环境变量
webpack从零搭建开发环境
为了方便也可以这么写,使用 npm run 命令这个命令执行的时候默认会把 node_modules 的.bin 文件放到全局上,执行之后销毁npm run buildnpm run dev
小丑同学
2020/09/21
1.3K0
vue项目使用.env文件配置全局环境变量
这些配置文件主要是替换掉全局的process的env,通过在不通文件中配置不同的环境变量, 关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件
青梅煮码
2023/01/31
1.2K0
vue-cli3项目搭建配置以及性能优化
在之前的开发中主要用的是vue-cli2,最近空闲时间比较多,接下来有新项目,本着偷懒的本能,自己打算搭建一个基础包以备后期开发应用,并对其进行性能优化和配置
青梅煮码
2023/03/13
1.7K0
vue-cli3项目搭建配置以及性能优化
vue 开发常用工具及配置三
在现在的前端开发中,前后分离、模块化、版本控制、文件合并与压缩、mock数据等,是在大前端开发避不开的概念。在开发的时候,以组件的方式分别开发,在部署的时候又将这些代码、图片、样式等资源优雅地合并成模块并以增量、热更新的方式加载到浏览器中,这样的模块化方案一直是前端架构师在解决和优化的焦点之一。
LIYI
2020/02/11
1.5K0
vue 开发常用工具及配置三
vue-cli3构建H5移动应用(vant+rem)
最后选择是否将配置项保存为预设,然后配置完成,开始生成项目. 进入项目 、启动项目
青梅煮码
2023/01/14
1.3K0
vue-cli3构建H5移动应用(vant+rem)
Vue CLI中使用webpack的多模式和环境变量
在vue项目中我们根据不同的环境去打不同的包, 如测试环境,开发环境, 正式环境 这个时候我们可以使用webpak中的模式和环境变量来操作
拿我格子衫来
2022/01/24
6690
Vue-Cli该如何使用?Vue-Cli学习笔记,持续记录
修改.Env环境变量文件之后,需要重新运行server才会生效。环境变量通过process.ENV访问。可以在项目根目录中放置下列文件来指定环境变量:
房东的狗丶
2023/02/17
1.6K0
【实战技巧】Vue3+Vite工程常用工具的接入方法
Vue3 正式版已经发布一段时间了,和 Vue3 更配的工具 Vite 也已经投入使用了,本文整理了如何将一些常用的工具整合到项目中。
一尾流莺
2022/12/10
2.1K0
vue封装axios请求工具类
以勇气面对人生的巨大悲恸,用耐心对待生活的小小哀伤。——雨果 首先安装 # axios cnpm i --save axios # 格式化参数插件 cnpm i -- save qs # 对象合并插件 cnpm i -- save lodash # cookie操作 cnpm i -- save vue-cookie 然后我们自己封装一个请求组件 首先创建文件 然后放入我们的代码。。。 import axios from 'axios' import qs from 'qs' import
阿超
2022/08/16
1.1K0
vue封装axios请求工具类
相关推荐
vue3 转
更多 >
LV.4
这个人很懒,什么都没有留下~
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验