UniApp之使用vue.config.js的详细教程

这篇具有很好参考价值的文章主要介绍了UniApp之使用vue.config.js的详细教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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',
        },
      },
    },
  },
};