vue3中引入全局的less 和配置代理

使用vue-cli搭建的项目，在项目中引入公共less变量：
创建vue.config.js，内容如下：

"use strict";
const path = require("path");

const proxyUrlPort = "http://xxxx";
module.exports = {
  devServer: {
    proxy: {
      "/xxx": {
        target: proxyUrlPort, //后端接口地址
        changeOrigin: true, //是否允许跨越
        pathRewrite: {
          "^/xx": "/xx", //重写,
        },
      }
    },
  },
  // 这种方法可以，需要使用 vue-cli 安装插件的方式来安装
  // 命令为：vue add style-resources-loader 
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/style/theme.less")],
    },
  },
	// 最开始使用的这种方式，但是会报各种错误，大致是相关的版本问题，经过各种 npm 安装版本，都不行
  /*configureWebpack: {
    module: {
      rules: [
        {
          test: /\.less$/,
          use: [
            {
              loader: "style-loader",
            },
            {
              loader: "css-loader",
            },
            {
              loader: "less-loader",
              options: {
                paths: [path.resolve(__dirname, "./src/style/theme.less")],
              },
            },
          ],
        },
      ],*/
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

需要使用 vue-cli 安装插件的方式来安装：vue add style-resources-loader