vue项目打包部署生产环境

最新推荐文章于 2025-01-06 13:58:48 发布
原创 最新推荐文章于 2025-01-06 13:58:48 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了在将项目打包部署到生产环境前，如何修改配置文件以解决静态资源和JS文件的路径问题，确保项目正常运行。

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

打包部署生产环境之前需要修改配置文件：

修改一：build > utils.js  (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题)

修改二：config > index.js (修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题)

两个文件修改完成之后，运行命令：npm run build 打包直接访问dist文件夹中的index.html即可。

vue项目打包之开发环境和部署环境的实现
10-15
总结起来，Vue项目打包的开发环境和部署环境实现关键在于区分和管理不同环境的配置。通过创建并配置多个入口文件，我们可以轻松地在开发和部署之间切换，同时避免手动修改代码导致的错误。这个过程不仅可以确保代码...
Vue3 区分开发环境与生产环境
最新发布
xiaonankeji的博客
05-14 843
在 Vue 3 使用 Vite 构建的项目中，可以通过 .env 文件区分开发环境和生产环境
配置vue开发环境和生产环境打包方式
mmasd01的博客
11-24 6080
配置vue开发环境和生产环境打包方式 1. 打开package.json文件，添加 "test": "node build/test.js" 2. 打开build文件，复制build.js文件并重命名为test.js 注：这里的build.js为生产环境打包使用，test.js为测试环境打包使用。 3.在config文件下，复制prod.env.js并重命名为test.env.js,用来配置测试环境。如图： 下面对test.env.js进行配置，设置NODE_ENV为’“testing”’，API_ROO
vue打包到生产环境
heshihu2019的博客
07-04 1545
npm run build 是生产环境。npm run dev 是开发环境,此时会自动打包在dist目录下。
Vue项目打包部署到iis服务器的配置方法
10-16
Vue.js 是一个用于构建用户界面的 JavaScript 框架，它允许开发者使用声明式方法编写应用程序界面。...对于新手来说，详细地了解和实践IIS服务器与Vue项目的结合配置，是将本地开发环境迁移到生产环境的重要步骤。
vue项目打包部署到服务器的方法示例
10-18
Vue项目通常会经历开发、构建、部署这几个步骤，而项目打包部署到服务器则是将开发好的Vue项目移至生产环境的重要环节。本文详细介绍了将Vue项目打包并部署到服务器上的具体方法和步骤，同时也会涉及到一些在部署...
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
vue的测试和生产环境打包
baozaoderenlei的博客
04-05 3505
首先在在项目中找到这个文件 然后在这个文件中的 中分别设置测试和生产的打包命令 "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-cli3多环境打包配置
10-17
主要介绍了vue-cli3多环境打包配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE生产环境打包build
qq690452074的专栏
11-11 730
1.进入到项目根目录执行 npm run build 这时可能会出错。 此时会自动打包在dist目录下 2.安装服务 npm install -g serve 3.启动 serve dist 本地可运行 总结： 以上就是生产环境打包的过程。 npm run dev是开发环境, npm run build是生产环境 ...
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之打包配置环境
阿狸演绎的博客
10-19 1077
在packjson.js里使用 —mode 重新定义打包的配置文件保证evn.xxxh 这个一定要和packjson.js 里的 --mode xxxh 对应上而serve:xxxh 一定要和运行命令的 npm run serve:xxxh 对上使用如下.evn.xxxhpackjson里"serve": "vue-cli-service serve", // 默认调用 env.dev。
SpringBoot+Vue生产环境打包
weixin_37622786的博客
12-09 3126
接上一篇开发环境下，完成开发后，打包上线 如下图所示，将index.js中assetsPublicPath改为’./’ 在build目录下utils.js下如图所示位置加入 publicPath: '…/…/' 3.将前端api接口地址/backround改成 . (点号)，当界面请求时，会在./user/register,会自动加前缀为当前后台地址 //register export...
Vue 打包和部署
Flying_Fish_roe的博客
01-06 3953
打包和部署是 Vue 应用上线的关键步骤，通过 Vue CLI 可以快速完成生产环境的打包。Vue 提供了灵活的配置选项，使得项目可以适配各种部署场景。在部署时，根据项目需求选择合适的托管方式，例如 Nginx、Netlify 或 Docker。通过合理的配置和优化，可以确保应用的高性能和可靠性。
vue项目打包布署
热门推荐
chenlim87的博客
12-25 2万+
我们使用Vue做项目时，通常前端是单独部署。用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题，内容概览： ...
Vue3 开发环境和生产环境打包配置
weixin_64310738的博客
01-17 8948
Vue3打包环境配置
VUE项目打包部署
03-20
### Vue.js 项目的打包与部署教程 #### 配置生产环境 为了确保 Vue.js 项目能够正确运行于生产环境中，通常需要对 `vue.config.js` 文件进行适当配置。如果项目中不存在该文件，则可以手动创建并放置在项目根目录下[^3]。 以下是常见的生产环境配置项： 1. **设置基础路径 (`publicPath`)** 如果应用被部署在一个子路径上而非根路径 (例如 `/my-app/`)，则需调整 `publicPath` 参数。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/' }; ``` 2. **定义输出目录 (`outputDir`)** 默认情况下，Vue CLI 将生成的静态资源存放在 `dist` 目录中。可以通过修改此属性来自定义目标位置。 ```javascript outputDir: 'dist-production', ``` 3. **启用 Gzip 压缩** 使用插件实现压缩功能以减少传输大小。 ```javascript const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\.(js|css|html|svg)$/, threshold: 10240, minRatio: 0.8 }) ] } }; ``` 4. **区分开发与生产环境变量** 创建 `.env.development` 和 `.env.production` 文件分别存储不同模式下的环境变量[^5]。例如，在生产环境下指定 API 地址： ``` VUE_APP_API_URL=https://api.example.com/ ``` #### 构建过程 完成上述配置后，执行以下命令启动构建流程： ```bash npm run build ``` 这会依据当前设定好的规则编译整个前端工程，并将最终产物放入之前所指明的目标文件夹内[^1]。 #### 部署至 Tomcat 服务器 当所有资产均已准备好之后，可按照如下方式上传到 Apache Tomcat 上面去[^4]: - 把生成出来的 HTML/CSS/JS 图片等内容复制粘贴进 Webapps 下新建的一个特定名称的应用容器里； - 启动服务端监听请求即可访问对应的 URL 路径加载页面效果出来； 注意：可能还需要额外处理跨域问题或者 SSL 加密连接等方面的事情视具体需求而定。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值