UniApp 项目中 vue.config.js 配置指南
本文详细介绍在 UniApp 项目根目录创建并配置 vue.config.js 文件的方法。涵盖基础路径、输出目录等默认设置,以及如何通过 chainWebpack 修改构建规则、配置 devServer 代理以及定义全局 Less 变量。保存文件后重新运行项目即可生效,帮助开发者灵活调整构建行为。
前言
UniApp 系基于 Vue.js 的跨平台开发框架,支持一套代码构建多平台应用(含小程序、H5、App)。vue.config.js 为 Vue CLI 配置文件,用于设定构建选项。本教程详解 UniApp 项目中 vue.config.js 的配置方法。
步骤一:创建 vue.config.js 文件
在项目根目录新建名为 vue.config.js 的文件。
步骤二:基本配置
编辑 vue.config.js 文件,加入如下基础配置:
module.exports = {
// 基本路径
publicPath: '/',
// 输出目录
outputDir: 'dist',
// 静态资源目录
assetsDir: 'static',
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// ...
};
步骤三:自定义配置
依具体需求添加自定义配置,例如修改 webpack 配置或配置代理。常见示例代码如下:
1.修改 webpack 配置:
module.exports = {
// ...
chainWebpack: config => {
// 添加一个新的 Loader
config.module
.rule('foo-loader')
.test(/\.foo$/)
.use('foo-loader')
.loader('foo-loader')
.end();
},
};
2.配置代理:
module.exports = {
// ...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
},
},
},
};
3.配置全局 less 变量:
module.exports = {
// ...
css: {
loaderOptions: {
less: {
globalVars: {
primaryColor: '#ff0000',
},
},
},
},
};
步骤四:生效配置
保存 vue.config.js 文件后重新运行项目,配置即可生效。
总结:
通过编写 vue.config.js 文件,可对 UniApp 项目进行各类配置,涵盖基本路径、输出目录、静态资源目录等。同时支持自定义配置,如修改 webpack 配置、配置代理等。此为简单教程,旨在协助您开始使用 vue.config.js 文件进行配置。
请注意,具体配置选项和示例代码可能因实际项目需求略有不同,建议查阅官方文档或相关资源以获取更详细的配置信息。
到此这篇关于UniApp使用vue.config.js进行配置的文章就介绍到这了,更多相关UniApp用vue.config.js配置内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
electron-builder打包与发布Electron应用
2026-11-01 05:18:32
Vue结合el-table实现表格行拖拽排序(基于sortablejs)
2026-11-01 01:30:37
详解如何在Vue中进行表单自定义验证
2026-11-01 01:17:28
uni-app全局变量的四种实现方式总结
2026-11-01 00:15:49
前端Vue完全销毁组件的三种方法
2026-10-31 20:21:32
