vue 打包之后生成一个配置文件修改接口域名

本文介绍如何在前端项目中创建并使用全局配置变量,包括新建配置文件、引入到HTML以及在项目中调用的方法。

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

第一步:在 static 静态文件中新建一个 config.js 文件,js 代码如下:

window.global_config = {
	BASE_URL: "http://192.168.0.137:90"
};

第二步:在 index.html 中引入 static 文件夹下的 config.js 文件

<script src="./static/config/index.js"></script>

第三步:在需要的地方使用:

// 在需要用到的地方直接用 window.global_config.BASE_URL
let url = window.global_config.BASE_URL + '/api/…
### Vue 项目打包后的运行与生产环境部署 Vue 项目通过 `npm run build` 进行打包后,会在项目根目录下生成一个名为 `dist` 的文件夹。该文件夹包含了经过优化的静态资源文件(HTML、CSS 和 JavaScript),这些文件可以直接用于生产环境部署。 #### 1. **理解打包后的结构** 打包完成后,`dist` 文件夹中的内容是整个应用的核心部分。它通常包含以下几个主要文件或子文件夹: - `index.html`: 应用的主要入口页面。 - `static/`: 存放静态资源文件,如图片、字体等。 - `js/`, `css/`: 经过压缩和混淆处理的脚本和样式文件。 需要注意的是,直接双击打开 `index.html` 页面可能无法正常显示应用功能[^2]。这是因为 Vue 是单页应用程序 (SPA),其路由依赖于服务器的支持来解析动态路径。 --- #### 2. **部署方式** 以下是常见的几种部署方法: ##### (1)**本地服务器部署** 可以通过简单的 HTTP 服务工具启动本地服务器。例如,在 Node.js 环境中安装 `http-server` 并运行: ```bash npm install -g http-server cd dist http-server ``` 这将在默认端口(通常是8080)上启动一个轻量级 Web 服务器,访问 `http://localhost:8080` 即可查看应用效果[^4]。 ##### (2)**Nginx 部署** 对于正式生产环境,推荐使用 Nginx 来托管静态资源。具体操作如下: - 将 `dist` 文件夹上传至服务器的目标位置。 - 编辑 Nginx 配置文件,设置站点根目录指向 `dist` 文件夹,并启用 SPA 路由支持: ```nginx server { listen 80; server_name your-domain.com; root /path/to/dist; # 设置dist文件夹的位置 index index.html; location / { try_files $uri /index.html; # 支持前端路由 } } ``` 重启 Nginx 后即可通过域名访问应用。 ##### (3)**云服务器部署** 如果选择将项目部署到云端平台(如阿里云、腾讯云或其他服务商),可以按照以下步骤执行: - 使用 FTP 或 SSH 工具将 `dist` 文件夹上传至目标服务器; - 根据所选用的服务商文档配置反向代理或 CDN 加速; - 如果需要前后端分离,则还需额外配置 API 请求地址。可以在 `.env.production` 中定义全局变量以指定接口基础 URL[^3]: ```plaintext VUE_APP_API_BASE_URL=https://api.yourdomain.com ``` --- #### 3. **注意事项** - 在实际部署之前,请务必测试所有外部请求是否能正确返回数据。 - 对于 HTTPS 场景,确保 SSL/TLS 证书已正确配置,避免因安全策略导致的功能异常[^1]。 --- ### 示例代码:Nginx 配置片段 ```nginx server { listen 80; server_name example.com; root /var/www/html/dist; index index.html; location / { try_files $uri /index.html; } error_page 500 502 503 504 /50x.html; } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值