vue打包到生产环境

最新推荐文章于 2024-10-19 15:15:00 发布
最新推荐文章于 2024-10-19 15:15:00 发布
阅读量1.5k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/heshihu2019/article/details/131532237
通过npmrunbuild在项目根目录进行生产环境打包，输出文件位于dist目录。然后全局安装serve服务，使用npminstall-gserve。最后运行servedist启动服务，展示生产环境构建结果。npmrundev则是用于开发环境的热更新构建。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.进入到项目根目录执行

  npm run build

此时会自动打包在dist目录下

2.安装服务

   npm  install -g serve

3.启动

   serve dist

在这里插入图片描述

以上是生产环境打包的过程。

npm run dev 是开发环境,

npm run build 是生产环境

vue项目打包部署生产环境
zhangli0421的博客
10-27 1115
打包部署生产环境之前需要修改配置文件：图片下面有代码可以直接复制。 修改一：build > utils.js(修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 哈哈，要是找不到可以直接搜下面的部分代码。 // Extract CSS when that option is specified // (which is the case during production build) if (options....
Vue3 区分开发环境与生产环境
最新发布
xiaonankeji的博客
05-14 793
在 Vue 3 使用 Vite 构建的项目中，可以通过 .env 文件区分开发环境和生产环境
VUE生产环境打包build
qq690452074的专栏
11-11 729
1.进入到项目根目录执行 npm run build 这时可能会出错。 此时会自动打包在dist目录下 2.安装服务 npm install -g serve 3.启动 serve dist 本地可运行 总结： 以上就是生产环境打包的过程。 npm run dev是开发环境, npm run build是生产环境 ...
vue之打包配置环境
阿狸演绎的博客
10-19 1073
在packjson.js里使用 —mode 重新定义打包的配置文件保证evn.xxxh 这个一定要和packjson.js 里的 --mode xxxh 对应上而serve:xxxh 一定要和运行命令的 npm run serve:xxxh 对上使用如下.evn.xxxhpackjson里"serve": "vue-cli-service serve", // 默认调用 env.dev。
十八、部署 Vue.js 项目到生产环境
走在bug的路上
03-25 1867
● 构建发布版本 ● 部署
详解vue.js根据不同环境(正式、测试)打包到不同目录
12-09
以下是根据标题和描述详细解释如何在Vue.js项目中实现根据不同环境打包到不同目录的方法： 1. **创建环境变量**： 在`build`文件夹下创建一个名为`testing.js`的新文件，用于配置测试环境的变量。在文件中，我们...
vue项目打包之开发环境和部署环境的实现
10-15
为了解决这个问题，我们可以创建两个不同的入口文件，一个用于开发环境，另一个用于生产环境。这样可以确保每个环境下的配置和依赖都能正确匹配。在Vue项目中，我们可以在`src`目录下创建`dev.env.js`和`prod_env.js...
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
10-17
这不仅有助于我们在将代码部署到生产环境前对打包结果进行检查，也能够帮助我们发现可能存在的问题，确保最终用户在生产环境下能够获得良好的访问体验。希望上述内容能对遇到类似问题的朋友们有所帮助，也希望大家能...
vue之配置生产环境和开发环境的打包命令及版本自动更新
kjhytfh的博客
09-15 1931
在开发过程中，总会遇到线上功能已经在使用的过程中要开发一些新的功能，而这些功能可能会影响已上线功能，这时候需要另辟一个环境用来测试；而且每个环境还要作区分，每次打包的版本都不一样；那么这篇文章就正好可以看看了。执行打包命令会自动更新版本号，执行更改的地方有.env.development文件中的和package.json文件中的version，执行更改的地方有.env.production文件中的和package.json文件中的version。
Vue2项目生产环境的打包优化
valsedefleurs的博客
06-27 1361
Vue项目生产环境的打包优化
详解vue-cli3多环境打包配置
10-17
主要介绍了vue-cli3多环境打包配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目配置打包测试环境/生产环境
采花小盗周的博客
03-22 1万+
vue项目配置打包测试环境/生产环境： 开发环境运行命令：npm run serve 生产环境打包命令：npm run pro 测试环境打包命令：npm run build 步骤： 1.项目中添加一个配置ip的js文件，比如如下的ip-config.js（位置不重要） 2.在生成axios实例的时候引入，封装baseUrl 3.在main.js中全局引入封装号的axios import http from "@/utils/request"; Vue.prototype.$http = http;
vue的测试和生产环境打包
baozaoderenlei的博客
04-05 3503
首先在在项目中找到这个文件 然后在这个文件中的 中分别设置测试和生产的打包命令 "build": "vue-cli-service build --mode production", "test": "vue-cli-service build --mode testing" --mode production和-mode testing是我们在项目中配置的文件 内容分别是 .env.production NODE_ENV = 'production' VUE_APP...
vue项目打包布署
热门推荐
chenlim87的博客
12-25 2万+
我们使用Vue做项目时，通常前端是单独部署。用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题，内容概览： ...
Vue生产环境部署
weixin_33806509的博客
09-14 384
前面的话 　　开发时，Vue 会提供很多警告来帮助解决常见的错误与陷阱。生产时，这些警告语句却没有用，反而会增加载荷量。再次，有些警告检查有小的运行时开销，生产环境模式下是可以避免的。本文将详细介绍Vue生产环境部署   生产环境 　　如果用 Vue 完整独立版本 (直接用 <script> 元素引入 Vue)，生产时应该用精简版本 (vue.min.js) 　　如果用 We...
前端vue项目部署到生产环境(包括nginx安装及配置)
黎小小的博客
12-13 2005
vue3项目发布到生产环境，并反向代理到后端数据连接
vue3+ts打包生产环境，测试环境，开发环境
sdad2154的博客
08-28 670
一、创建配置文件1、与src目录同级创建配置文件|—src— ||—views2、文件配置内容MODE ：用于区分每个环境PROXY_PREFIX ：代理VUE_APP_API_URL ：环境地址③.env.test。
vue打包区分生产和开发环境
01-03
### Vue 项目中区分生产环境和开发环境进行打包 #### 配置 `vue.config.js` 或者 `vite.config.ts` 为了实现生产和开发环境的自动识别与切换，在构建工具配置文件中设置不同的环境变量是一个常见做法。对于基于 Webpack 的 Vue CLI 项目，可以在 `vue.config.js` 中定义环境特定的配置项；而对于采用 Vite 构建系统的项目，则应在 `vite.config.ts` 文件里完成相应设定。 在 Vue CLI 项目中的 `vue.config.js` 可以通过如下方式来处理： ```javascript module.exports = { devServer: { proxy: 'http://localhost:8080' // 开发服务器代理设置 }, configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 修改生产模式下的配置 Object.assign(config.resolve.alias, { '@': path.resolve(__dirname, './src') }) } else { // 修改其他模式（如开发）下的配置 } } } ``` 而在 Vite 项目里的 `vite.config.ts` 则可以这样写： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig(({ command }) => ({ plugins: [vue()], server: { port: 3000, open: true, proxy: { '/api': { target: process.env.DEV_API_SERVER || 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } }, build: { rollupOptions: { output: { entryFileNames: `[name].${command}.js`, chunkFileNames: `[name]-[hash].${command}.js`, assetFileNames: `[name].[ext]?id=[hash]` } } } })) ``` 上述代码片段展示了如何根据不同命令(`serve` or `build`)调整输出路径名称[^1][^2]。 #### 使用 `.env` 文件管理环境变量 除了修改构建配置外，还可以利用`.env`系列文件(.env,.env.development,.env.production等)，这些文件允许开发者轻松地为不同运行阶段指定独特的参数而不必硬编码到源码之中。例如: - .env.development: ```plaintext NODE_ENV=development API_URL=http://local.api.com/ ``` - .env.production ```plaintext NODE_ENV=production API_URL=https://real.api.com/ ``` 当执行 `npm run serve` 启动本地服务时会读取 `.env.development`; 而调用 `npm run build` 进行正式版编译则依据 `.env.production` 设置[^3]. #### 自定义脚本支持多环境部署 最后一步是在项目的根目录下找到 `package.json`, 并在此处添加自定义 NPM 命令以便于针对各个目标平台分别创建优化后的资源包。这通常涉及到向 `"scripts"` 字段追加额外条目，比如下面的例子所示： ```json { "scripts": { "serve": "vue-cli-service serve", "build:dev": "vue-cli-service build --mode development", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode production" } } ``` 如此一来便可以通过简单的命令行指令快速切换至所需的工作流并生成适配当前上下文的应用版本[^4].
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值