vue配置打包命令，根据不同开发环境打包成不同的文件夹（默认打包文件为dist）

最新推荐文章于 2024-07-20 11:36:24 发布

玛卡巴卡阿卡哇

最新推荐文章于 2024-07-20 11:36:24 发布

阅读量1.5k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41147046/article/details/132710987

版权

1、根据系统使用参数，新增环境变量配置参数以production环境为例
2、创建.env.production文件，并对当前环境系统参数进行配置

# 生产环境
ENV = 'production'

# 打包文件名
VUE_APP_OUTPUT = 'production'
VUE_APP_API_URL='http://xxxxxxx/pap/admin'
VUE_APP_FILE_URL='http://xxxxxxx/pap/admin'

3、在package.json文件中配置打包命令

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"production": "vue-cli-service build --mode production",//production环境打包命令

4、在vue.config.js文件中配置根据环境变量打包时的文件名称，默认为dist

outputDir: process.env.VUE_APP_OUTPUT ? process.env.VUE_APP_OUTPUT : 'dist',

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

玛卡巴卡阿卡哇

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】

**My Coding Family**

03-24

9226

零基础带你入门Vue项目打包部署到Linux服务器，一条龙服务，只为不远千里把你教会。

详解vue.js根据不同环境(正式、测试)打包到不同目录

10-18

主要介绍了详解vue.js根据不同环境(正式、测试)打包到不同目录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

1 条评论您还未登录，请先登录后发表或查看评论

Vue多环境打包配置，根据命令生成不同打包文件名

Web_chicken的博客

06-24

4026

2.使用env配置文件设置Axios的baseURL 3.配置scripts脚本运行命令模式在package.json文件下的scripts对象中配置mode

vue2项目打包文件dist体积变小，解决加载过慢的问题

最新发布

fzxyxf1314的博客

07-20

115

1.webpack打包不生成map文件 config/index.js productionSourceMap=false。

vue项目根据不同环境打包

weixin_62100446的博客

05-11

452

vue项目根据不同环境（.env）打包

vue打包命令

解决bug的路上

03-04

6202

npm run build:prod --report

vue项目经验：vue-cli3根据不同环境配置打包命令

weixin_45031595的博客

05-10

741

在vue-cli3的项目中， npm run serve时会把process.env.NODE_ENV设置为development； npm run build 时会把process.env.NODE_ENV设置为production；此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。一、创建环境配置文件 1、.env.development文件（开发环境） NODE_ENV=development VUE_APP_ENV=development

详解webpack打包vue项目之后生成的dist文件该怎么启动运行

10-16

webpack打包vue项目之后生成的dist文件启动运行的方法涉及到多个步骤和知识点，包含了Vue、webpack、Express以及Node.js的综合运用。下面将详细解析每个步骤背后的原理和技术点。 ### webpack打包Vue项目 webpack...

vue打包静态资源后显示空白及static文件路径报错的解决

10-14

默认情况下，assetsPublicPath设置为'/'，这可能会导致在本地开发环境下路径正确，但在构建后的生产环境中的路径不正确。为了修复这个问题，需要将assetsPublicPath的值改为相对路径'./'，这样配置后，所有的资源...

解决Vue打包之后文件路径出错的问题

08-27

Vue CLI在构建项目时，会根据配置文件进行一系列优化，包括代码分割、压缩等。其中，静态资源的路径处理是关键部分。默认情况下，Vue CLI会将所有产出文件放置在一个根目录下，这可能导致在非根目录下运行时，相对...

vue根据环境不同配置不同的打包命令（史上最简单）

qq_34215737的博客

11-04

4453

前提：各种vue环境已经配置完毕，vue-cli脚手架安装好。 1.在项目根目录创建如下图所示三个文件，分别取名为 .env.development .env.production .env.test 2.然后在这三个文件里依次写入如下内容： NODE_ENV = ‘development’ VUE_APP_CURENV = ‘development’ NODE_ENV = ‘production’ VUE_APP_CURENV = ‘production’ NODE_ENV = ‘test’ VUE

vue项目打包命令

zhaokai621的博客

11-29

5787

在本地项目打开Dos小黑窗口打包命令： mvn clean package -Dmaven.skip.test=true 命令解释：先清理项目，再跳过测试，打包

vue 打包

weixin_44570241的博客

08-02

180

最近使用做vue项目的时候，使用npm run build命令对项目进行打包的时候出现了问题，打包生成dist目录后，打开里面的index.html文件，发现竟然是空白！问题就是这样的，下面说一下博主打包时的环境是怎样的。问题产生的环境 vue-cli的版本为4.4.1，使用vue -V 或者vue --version命令可查看 vue的版本是2.6.11 使用npm list vue命令可查看（需要cd进入到项目目录） ps：应该有很多人以为使用vue -V 命令查出来的就是vue的版本，其实查出来的是

vue打包命令: npm run build

qq_38213987的博客

11-16

1159

vue项目打包

风情

04-03

422

此外，如果你的Vue项目是一个单页面应用（SPA），那么打包后的文件通常只包含一个HTML入口文件和一些静态资源。如果你的项目使用了路由，那么所有的页面路由将由Vue Router在客户端处理，而不需要服务器端的路由配置。这些文件包括HTML、CSS、JavaScript以及可能的其他资源文件，它们都是已经压缩和优化过的，适合在生产环境中使用。这将会执行Vue CLI内置的构建脚本，将你的源代码编译成优化过的、用于生产环境的代码。目录中的文件部署到你选择的服务器或静态文件托管服务上。

vue不同环境打包配置不同 vue环境变量配置

Baby_加油_的博客

03-15

5002

（即每个环境对应变量的变量值都是一样的时候，则可以将变量定义在公用的.env文件中，而对应每个环境的 .env.xxx文件中则不需要再重复定义此变量）.在.env.xxx 文件中只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。vue-cli-service build --mode test :命令中的test对应的是 .env.xxx 文件的后缀名，如果也找不到.env.test文件，则打包报错。

Vue项目打包常用命令

qq5201314wx的博客

09-01

3553

自用需要环境:node.js npm 1.初始化 npm install初始化的时候需要执行这个命令然后看文件里有node_modules就行了 2.打包 npm run build 打包命令看到文件夹里dist成功

vue 打包命令_Vue面试题总结

weixin_36403956的博客

01-26

295

前言：Vue面试题文档内容主要包括vue-cli工程，vue核心知识点，vue-router，vuex，http请求，UI样式，常用功能，MVVM设计模式，深入拓展。vue-cli工程1、构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？(1)vue.js：vue-cli工程的核心，主要特点是双向数据绑定和组件系统。(2)vue-router：vue官方推荐使用的路由框架。(...

vue如何打包

百变鹏仔工作室

02-04

601

此外，还可以直接通过 VS Code 的 NPM 脚本中提供的。在Vue 项目中，可以使用。鹏仔前端 pjxi.com。按钮来完成前端工程打包。

vue dist 打包命令

03-27

在使用 Vue CLI 进行开发时，可以使用以下命令进行打包： 1. 开发环境打包命令： ```bash npm run build ``` 这个命令会将项目打包到默认的 `dist` 目录中，生成的文件为开发环境所需的文件，包括未压缩的 JavaScript 和 CSS 文件。 2. 生产环境打包命令： ```bash npm run build -- --mode production ``` 这个命令会将项目打包到默认的 `dist` 目录中，生成的文件为生产环境所需的文件，包括压缩后的 JavaScript 和 CSS 文件。在执行命令时，也可以指定打包的目录和文件名： ```bash npm run build -- --dest <path/to/destination> --filename <filename> ``` 其中，`--dest` 参数用于指定打包的目录，`--filename` 参数用于指定打包后生成的 JavaScript 文件名。默认情况下，打包后的文件名为 `app.js`。