UniApp使用vue.config.js進行配置的詳細教程

更新時間：2023年10月17日 15:03:05 作者：dogdev

這篇文章主要給大家介紹了關于UniApp使用vue.config.js進行配置的詳細教程,uniapp是一套基于Vue語法的框架,同樣也支持Vue.config.js配置,一般常用的莫過于路徑的名稱,需要的朋友可以參考下

前言

UniApp 是一個基于 Vue.js 的跨平臺開發(fā)框架，允許開發(fā)者使用一套代碼構建同時運行在多個平臺（包括小程序、H5、App）的應用程序。而 vue.config.js 文件是 Vue CLI 提供的配置文件，用于配置構建過程中的各種選項。本教程將詳細介紹如何在 UniApp 項目中使用 vue.config.js 文件進行配置。

步驟一：創(chuàng)建 vue.config.js 文件

在根目錄下創(chuàng)建一個名為 vue.config.js 的文件。

步驟二：基本配置

打開 vue.config.js 文件，并添加以下基本配置：

module.exports = {
  // 基本路徑
  publicPath: '/',
  // 輸出目錄
  outputDir: 'dist',
  // 靜態(tài)資源目錄
  assetsDir: 'static',
  // 生產環(huán)境是否生成 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',
        },
      },
    },
  },
};