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

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

第一步:在 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/…
<think>我们正在讨论若依Vue项目打包后的dist文件夹内容。根据引用内容,Vue项目打包后通常会生成一个dist目录,其中包含index.html文件以及静态资源(如JS、CSS、图片等)。具体到若依Vue框架(基于Vue的前后端分离框架),其打包后的dist文件夹结构与其他Vue项目类似,但可能会有一些特定的文件或配置。 根据引用[1]和引用[2]: - 打包命令为`npm run build` - 打包生成dist文件夹,其中包含index.html和静态资源文件夹(如static或根据配置的assetsSubDirectory名称) - 打包后直接打开index.html可能无法正常运行,因为文件路径问题(需要配置正确的publicPath)或需要服务器环境(如使用history模式的路由) 根据引用[3]: - 可以使用插件(如filemanager-webpack-plugin)在打包后自动将dist文件夹压缩为zip文件 根据引用[4]: - dist文件夹通常不纳入版本控制(如.gitignore中忽略) 因此,若依Vue打包后dist文件夹的内容及相关情况如下: ### 1. 打包命令 ```bash npm run build ``` ### 2. dist文件夹结构(典型) ``` dist/ ├── index.html # 主入口文件 ├── static/ # 静态资源目录(默认,可通过配置修改) │ ├── css/ │ │ ├── app.[hash].css │ │ └── chunk-vendors.[hash].css │ ├── js/ │ │ ├── app.[hash].js │ │ └── chunk-vendors.[hash].js │ └── img/ # 图片等资源 │ └── logo.[hash].png └── favicon.ico # 网站图标 ``` 注意:若依Vue可能根据其具体配置,结构略有不同。例如,若配置了多页面应用,则可能有多个html文件。 ### 3. 配置说明 在若依Vue中,打包配置主要位于`vue.config.js`文件中。以下关键配置项会影响dist文件夹内容: - `outputDir`: 打包输出的目录,默认为`dist` - `assetsDir`: 静态资源目录,默认为`static` - `publicPath`: 部署应用包时的基本URL,默认为`/`(即根路径) 若在本地直接打开index.html,需要将publicPath改为相对路径`./`,否则会出现空白页或资源加载失败[^2]。 ### 4. 解决打包后本地打开index.html空白问题 在`vue.config.js`中设置: ```javascript module.exports = { publicPath: './', // 改为相对路径 // ...其他配置 } ``` ### 5. 自动化压缩dist文件夹 使用`filemanager-webpack-plugin`插件,在打包完成后自动压缩dist文件夹为zip文件: 1. 安装插件 ```bash npm install filemanager-webpack-plugin --save-dev ``` 2. 在`vue.config.js`中配置 ```javascript const FileManagerPlugin = require('filemanager-webpack-plugin'); module.exports = { // ...其他配置 chainWebpack: (config) => { // ...其他chainWebpack配置 }, configureWebpack: { plugins: [ new FileManagerPlugin({ events: { onEnd: { delete: ['./dist.zip'], archive: [ { source: './dist', destination: './dist.zip' }, ], }, }, }), ], }, }; ``` ### 6. 部署注意事项 - 若使用Vue Router的history模式,部署到服务器需要配置URL重定向(将所有路径重定向到index.html)[^1] - 若依Vue框架可能集成了权限管理等,确保后端API接口可访问 ### 7. 忽略dist文件夹 在`.gitignore`文件中,通常忽略dist文件夹,避免将构建产物提交到代码仓库[^4]。 --- ### 典型问题及解决 | 问题现象 | 原因 | 解决方案 | |---------|------|---------| | 打包后index.html空白 | 资源路径错误/路由模式错误 | 配置`publicPath: './'`,或使用服务器运行 | | 图片等资源404 | 路径错误 | 检查`publicPath`及资源引用路径 | | 路由跳转404(部署后) | 未配置服务器重定向 | 配置服务器(如Nginx)的`try_files` | --- §§ 相关问题 §§ 1. 若依Vue如何配置多环境打包?(如开发、测试、生产环境) 2. 如何优化若依Vue项目的打包体积? 3. 若依Vue打包后如何部署到Nginx服务器? 4. 如何解决若依Vue打包后跨域问题? </think>### 若依Vue打包后dist文件夹详解 若依Vue框架(RuoYi-Vue打包后的dist文件夹是标准Vue项目的生产环境构建产物,包含以下核心内容: #### 1. **核心文件结构** ```bash dist/ ├── index.html # 主入口HTML文件(SPA核心)[^1][^2] ├── static/ # 静态资源目录(默认名称) │ ├── css/ # 压缩后的CSS文件 │ │ ├── app.xxxx.css # 应用样式(带哈希防缓存) │ │ └── chunk.xxxx.css # 异步组件样式 │ ├── js/ # 压缩后的JS文件 │ │ ├── app.xxxx.js # 应用主逻辑 │ │ ├── chunk-vendors.xxxx.js # 第三方依赖库 │ │ └── chunk-xxxx.js # 路由异步组件 │ └── img/ # 压缩后的图片资源 ├── favicon.ico # 网站图标 └── .htaccess # Apache服务器配置(若配置了History模式) ``` --- #### 2. **关键配置说明** 通过`vue.config.js`可定制dist内容: ```javascript // vue.config.js module.exports = { outputDir: 'dist', // 输出目录(默认dist) assetsDir: 'static', // 静态资源目录名(默认static) publicPath: process.env.NODE_ENV === 'production' ? '/your-project-path/' // 生产环境路径(需匹配服务器部署路径) : '/' // 开发环境路径 } ``` - **路径问题**:若直接打开`index.html`空白,需将`publicPath`改为相对路径`./`[^2] - **静态资源**:`assetsDir`为空时,资源会直接输出到dist根目录[^2] --- #### 3. **部署注意事项** | 问题现象 | 原因 | 解决方案 | |------------------------|------------------------|------------------------------| | 页面空白/资源404 | `publicPath`配置错误 | 改为`./`或匹配服务器路径[^2] | | 路由跳转404(History模式)| 未配置服务器重定向 | Nginx添加:`try_files $uri $uri/ /index.html;`[^1] | | 跨域问题 | 后端接口未配置CORS | 部署时确保API网关允许前端域名 | --- #### 4. **自动化处理** 通过插件增强打包流程(参考引用[3]): 1. 安装压缩插件: ```bash npm install filemanager-webpack-plugin --save-dev ``` 2. 在`vue.config.js`中配置自动生成dist.zip: ```javascript const FileManagerPlugin = require('filemanager-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new FileManagerPlugin({ events: { onEnd: { archive: [{ source: './dist', destination: './dist.zip' }] } } }) ] } } ``` --- #### 5. **版本控制建议** - dist文件夹**不应提交到Git仓库**(添加至.gitignore)[^4]: ```gitignore # .gitignore dist/ .DS_Store ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值