UniApp is a Vue.js-based cross-platform development framework that allows developers to use a set of codes to build applications that run on multiple platforms (including applets, H5, and Apps) at the same time. The vue.config.js file is a configuration file provided by Vue CLI, which is used to configure various options during the construction process. This tutorial will introduce in detail how to use the vue.config.js file in the UniApp project for configuration.
Step 1: Create a vue.config.js file
Create a file called vue.config.js in the root directory.
Step 2: Basic configuration
Open the vue.config.js file and add the following basic configuration:
module.exports = {
// 基本路径
publicPath: '/',
// 输出目录
outputDir: 'dist',
// 静态资源目录
assetsDir: 'static',
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// ...
};
Step 3: Customize configuration
You can add other custom configurations according to specific needs, such as modifying webpack configuration, configuring proxy, etc. The following are some common sample codes:
1. Modify the webpack configuration:
module.exports = {
// ...
chainWebpack: config => {
// 添加一个新的 Loader
config.module
.rule('foo-loader')
.test(/\.foo$/)
.use('foo-loader')
.loader('foo-loader')
.end();
},
};
2. Configure the proxy:
module.exports = {
// ...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
},
},
},
};
3. Configure the global less variable:
module.exports = {
// ...
css: {
loaderOptions: {
less: {
globalVars: {
primaryColor: '#ff0000',
},
},
},
},
};
Step 4: Valid configuration
Save the vue.config.js file and re-run the project, the configuration will take effect.
Summarize:
By writing the vue.config.js file, various configurations can be performed on the UniApp project, including basic path, output directory, static resource directory, etc. At the same time, you can also perform custom configurations as needed, such as modifying webpack configurations, configuring proxies, and so on. The above is a simple tutorial, hoping to help you start using the vue.config.js file for configuration.
Please note that specific configuration options and sample codes may vary slightly according to actual project requirements. It is recommended to consult official documents or related resources for more detailed configuration information.