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

最新推荐文章于 2024-06-17 02:23:22 发布

~~帅~~

最新推荐文章于 2024-06-17 02:23:22 发布

阅读量1.3k

点赞数

文章标签： less vue.js javascript vue.config.js vue3 代理

本文链接：https://blog.csdn.net/qq_40652539/article/details/125507235

版权

使用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")],
              },
            },
          ],
        },
      ],*/
    },
  },
};