vue3 配置生产和开发 非vite

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量231 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41956361/article/details/133695873
版权

首先在根目录创建.env.development和.env.production文件env文件随意
在这里插入图片描述

development文件配置
在这里插入图片描述

production文件配置

在这里插入图片描述

注意:有些需要配置名称是有要求的！
通过process.env就能拿到我们的信息了，然后在pack配置启动

争取一行
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
若依vue3,基于webpack(非vite版本)
01-02
5. **非Vite版本的原因**：虽然Vite提供了更快的开发体验，但Webpack在生产环境的优化、兼容性和插件生态系统方面仍然更强大。对于大型项目或有特殊需求的项目，Webpack可能是更稳定的选择。 6. **若依UI框架**：若...
vite2 + vue3构建多页应用-源码demo
10-15
Vue3 提供了更加高效、模块化和可扩展的组件系统，而Vite2则是一款由Vue.js作者尤雨溪开发的新型构建工具，它利用了ES模块的原生加载能力，大大提升了开发时的性能。本项目“vite2 + vue3构建多页应用-源码demo”将...
vue3配置环境变量，小白简单易学
Leijiang0504的博客
11-13 1853
左边是本地测试环境，右边是打包后的生产环境，写这个环境变量的好处就是，你在本地开发的时候变量随便改，不会影响生产环境，只要你不去改生产环境的文件就ok。环境变量的意义就是防止我们更新打包的时候写错变量，合并代码这些一系列问题。第一步创建一个.env.development这是本地开发环境。这里创建好了之后最后配置一下package.json就ok了。第二步创建.env.production生产环境变量。最后你运行一下跑一下看一下输出就可以了。好了，下面小白按照下面的来，非常简单。非常简单，有问题滴滴我。
VUE3中，使用.env.development和.env.production
故里2130
01-05 6519
在实际项目开发过程中，可能开发环境和生产（测试）环境不一样，经常需要修改配置常量，才能满足对应的环境，才能使软件运行起来。6.此时，我这里使用nginx进行发布，当然你也可以使用别的发布网址，比如IIS等等。4.打包后，之前的config.js就没有了，复制所有的打包文件。nginx的配置，之前文档已经介绍了，这里不再说明。5.选择build，生成生产模式，程序就在dist中。1.打包前，在项目的根目录中，创建config.js。部署完成后，直接打开，我这里是808端口。开头，否则无法识别，如图所示。
基于 Webpack 项目接入 Vite 你可能需要注意的点
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-23 923
前言在之前的 **如何优化你的 vue-cli 项目？**[2] 一文中介绍基于 webpack 进行的一些优化方法，本文的核心是基于一个 vue2 的项目（也就是上篇文章中的项目）来继续介绍一下如何接入 vite，以及这个过程中需要关注的点。之前的优化是基于已有的 构建工具 进行的处理，现在相当于直接替换 构建工具，主要用于提升开发时的整体编译速度和效率，本身也是一个优化点。本篇文章其实是之前的...
Vue3 项目搭建基本配置
weixin_41484992的博客
11-27 1280
Vue3 项目搭建基本配置一、创建项目二、安装依赖1.安装axios、vue-axios2.安装UI库 element-plus3.安装路由库 vue-router三、main.js配置四、路由router配置（index.js）五、开发环境跨域配置1.配置baseURL六、解决开发环境跨域代理生效，生产环境不生效问题1.在项目根路径增加环境配置文件：.env.development、.env.production，内容分别为2.修改构建脚本，使用指定的环境文件3.重新配置baseurl 一、创建项目 vu
vue3 vite配置开发生产环境
小白的博客
10-13 590
项目根目录下创建.env.development文件。项目根目录下创建.env.production文件。
vite（vue3+ts）配置开发、测试、生产环境
热门推荐
LuoYi_ly_的博客
08-18 1万+
关于vite配置开发、测试、生产环境的记录。
Vue3 + vite 本地开发配置 proxy
sam的牛栏
06-18 2158
发现脚手架没有像 vue2 + webpack 一样配置 proxy 。而且Vue3 的脚手架使用的是 vite（官方的自然是最好的），那么在 vite 中应该如何配置后端的路由转发呢？
vite+vue3 配置生产与开发环境.env文件
xianyus4mA的博客
03-17 996
vite配置,开发环境切换
Vue3 Vite配置环境变量
行如逆水行舟，不进则退
04-19 760
使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。：全局环境默认配置文件，无论什么环境都会加载合并。：uat环境的配置文件。Vite 在一个特殊的。：开发环境的配置文件。对象上暴露环境变量。
vue3的vite配置
weixin_52663662的博客
11-27 2293
vue3的vite配置
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
vite+vue3动态模块化导入并使用pinia
03-25
1. **配置Vite**：在`vite.config.js`中，我们需要配置Vue3和Pinia的插件，如`@vitejs/plugin-vue`和`vite-plugin-pinia`，确保这些插件能在项目中正常工作。 2. **创建Pinia Store**：在`src`目录下创建`stores`...
Vue 3 + NaiveUi + pinia + Vite
03-25
综上所述，这个项目使用了Vue 3的新特性和最佳实践，结合了NaiveUi和Pinia来构建用户界面和管理状态，采用了Vite提升开发体验。项目还涉及到了VR、Unity3D集成、地图操作、Echarts封装和数据持久化，展示了一个全面...
【前端】vue 报错:The template root requires exactly one element
程序员-张师傅
07-25 922
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 408
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 192
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 270
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
vue3 cli 和vue3 vite 区别
05-24
Vue3 CLI 和 Vue3 Vite 都是用于 Vue3 项目开发的工具，但有一些区别。 Vue3 CLI 是官方提供的构建 Vue3 项目的脚手架工具，提供了一些常用的功能和插件，如 Vue Router、Vuex、TypeScript 等。Vue3 CLI 使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值