构建vue项目配置和环境配置

这篇具有很好参考价值的文章主要介绍了构建vue项目配置和环境配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、环境变量process.env配置

vue-cli中

注意:变量名必须以 VUE_APP_ 开头,这样才能在项目中被识别为环境变量。

新建文件.env.development

VUE_APP_API_URL=http://api.example.com
VUE_APP_ENV=development

新建文件.env.production

VUE_APP_API_URL=http://api.example.com
VUE_APP_ENV=production

vue中获取环境变量

console.log(process.env, 'process.env');

构建vue项目配置和环境配置,vue.js,javascript,前端

vite中
新建文件.env.development

NODE_ENV="development"
VITE_BASE_URL="http://127.0.0.0:8080"

新建文件.env.production

NODE_ENV="production"
VITE_BASE_URL="http://127.0.0.0:8080"

vite中获取环境变量

console.log(import.meta.env, 'process.env');

构建vue项目配置和环境配置,vue.js,javascript,前端

2、vue package.json多环境配置

  "scripts": {
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    //新增development环境,相当于serve
    "serve:dev": "vue-cli-service serve --mode development",
    //新增production环境
    "serve:prod": "vue-cli-service serve --mode production"
  },

如果你可以使用 npx (最新版的 npm 应该已经自带),也可以直接这样调用命令:

npx vue-cli-service serve

vue-cli-service serve其他用法

用法:vue-cli-service serve [options] [entry]

选项:
  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值:development)
  --host    指定 host (默认值:0.0.0.0)
  --port    指定 port (默认值:8080)
  --https   使用 https (默认值:false)

举例:
  "scripts": {
   
    "serve": "vue-cli-service serve  --open",
    "serve:dev": "vue-cli-service serve --mode development --open",
  },

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

除了通过命令行参数,你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器。

命令行参数 [entry] 将被指定为唯一入口 (默认值:src/main.js,TypeScript 项目则为 src/main.ts),而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。文章来源地址https://www.toymoban.com/news/detail-623040.html

vue-cli-service build其他用法

用法:vue-cli-service build [options] [entry|pattern]

选项:

  --mode        指定环境模式 (默认值:production)
  --dest        指定输出目录 (默认值:dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值:app

到了这里,关于构建vue项目配置和环境配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(60)
  • jenkins构建前端vue项目

    目录 前言: 1.jenkins配置参数 2.构建前端代码脚本 3.额外补充相关配置 服务器,已部署nginx和jenkisn和npm,在此基础上部署前端项目, 后续补充相关nginx等服务器安装操作; 1.新增一个软件项目  2.新增项目描述 3.配置历史镜像处理规则 例如:一个构建任务最多保留30天,最多

    2024年02月10日
    浏览(37)
  • vue前端使用Jenkins自动构建项目,保姆级教程

    1. 开始前的准备工作 在阿里云控台界面搜索 容器镜像服务 添加个人版的容器镜像服务 然后在服务器上安装docker使用下面两个脚本文件 创建一个脚本 install_before_docker_env.sh 创建第二个脚本 install_docker-new.sh 在服务根目录下创建一个 install 目录将两个脚本文件放入 cd 到 instal

    2024年02月05日
    浏览(56)
  • 前端Vue Node.js + Express + MongoDB 构建的后端服务API接口

    构建一个使用 Vue.js 作为前端, Node.js + Express + MongoDB 作为后端服务的全栈应用涉及到多个步骤。这里简要概述整个过程,并提供一些基本的代码示例来帮助你开始。 安装 MongoDB: 根据你的操作系统从 MongoDB 官网 下载并安装 MongoDB。 启动 MongoDB 服务: 安装完成后,根据 MongoDB 的

    2024年04月14日
    浏览(51)
  • 前端配置开发环境,新电脑配置前端开发环境,Vue开发环境配置的详细过程(前端开发环境配置,电脑重置后配置前端开发环境)

    简介:有时候,我们需要在新电脑 或者 电脑重置后,配置前端开发环境,具体都需要安装什么软件和插件,这里来记录一下(文章适合新手和小白,大佬可以带过)。 ✨前端开发环境,需要用到的软件和插件: Chrome Visual Studio Code(vscode)  Node.js(npm / cnpm) Vue CLI (vue-

    2024年03月19日
    浏览(50)
  • Jenkins自动拉取SVN源代码构建打包vue前端项目

    目录 1.功能需求 2.安装插件 2.1 安装NodeJS插件 2.2  安装SVN插件 3.配置环境 3.1  NodeJS环境 4.新建任务配置部署信息 4.1  源代码管理 4.2  构建触发器 4.3  构建环境  4.4  构建步骤 5.构建项目  5.1 点击查看控制台日志 使用Jenkins从SVN上拉取Vue项目进行自动构建打包。如果需要发

    2023年04月22日
    浏览(46)
  • 【前端】vue.js从入门到项目实战笔记

    【前端目录贴】 文本插值中的代码被解释为节点的文本内容,而HTML插值中的代码则被渲染为视图节点。 3.1.1 文本插值 文本插值的方式:用 双大括号 将要绑定的变量、值、表达式括住就可以实现,Vue将会 获取计算后的值 ,并以 文本的形式 将其展示出来。 结果: 3.1.2 HTM

    2024年01月21日
    浏览(50)
  • [从零开发JS应用] 如何在VScode中配置Javascript环境,常见的调试方法有哪些?

    记录环境配置:本文配置的环境主要针对单独JS文件的断点调试,主要是为了调试LeetCode里面的代码。 首先在官网下载对应的版本:https://nodejs.org/en/ 开始安装,可以自定义选择安装路径。 这里 选择Add Path ,系统变量会自动设置,但是用户变量并没有自动设置,需要的话可以

    2024年02月04日
    浏览(53)
  • Vue前端环境搭建以及项目搭建

    安装node.js 安装node.js主要是为了安装npm工具,用于管理js包等,类似于java的maven。 去官网下载安装。 配置新的镜像源 安装webpack webpack是前端项目打包工具。 命令: 安装vue-cli 这是vue的开发工具。 安装文档地址:https://cli.vuejs.org/zh/guide/installation.html 命令: 查看vue-cli: vue-

    2024年01月23日
    浏览(62)
  • web前端开发项目走proxy代理后端接口,构建发布到生产等环境后,如何修改api接口

    在开发环境,因为本地站点和接口站点不是同一个域名,就产生了跨域问题,但是不可能让后端开发跨域端口或使用 jsonp ,所以,一般是让前端通过在 webpack.config.js 中配置 proxy 来走接口代理。 代码如下: 这样,就将本地域名代理到接口了。 构建成 dist目录 后,就不能修改

    2024年02月15日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包