第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局变量

本文介绍了如何在Vue项目中安装Lessloader,配置less和sourceMap,以及在vue.config.js中设置全局变量和路径别名的详细过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

安装

项目根目录下打开终端或命令行工具,运行以下命令来安装相关依赖包:

npm install less-loader less --save-dev

这会将 Less 和 Less loader 作为开发依赖项安装到你的项目中。
如果没有其他需求,安装好就已经可以在项目中直接使用了。

在项目中使用

1. Vue文件中使用

找到 src/App.vue 文件中 <style> 代码块,添加 lang="less"scoped:

<style lang="less" scoped>
</style>

lang="less" 表示该

2. 引入独立less样式文件

src/assets/styles 文件夹下新建一个,名为index.less的通用样式文件,并添加自己习惯的通用样式,可参考以下内容:

body, html {
  min-height: 100%;
  font-size: 16px;
  color: #333;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body, ul, div, img, h5, h4, h3, h2, h1, p, span, table, figure, i, em, tt, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
body > * {
  margin: auto;
}
a {
  cursor: pointer;
  text-decoration: none;
}
i {
  font-style: normal;
}
textarea {
  font-family: inherit;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.none {
  position: absolute;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
  border: none;
}
.cursor-p {
  cursor: pointer;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

然后在src/main.js中引入:

import '@css/index.less'

修改后的代码如下:

import Vue from 'vue'
import App from './App.vue'
import '@css/index.less'

// 禁用生产环境提示
Vue.config.productionTip = false

new Vue({
  render: (h) => h(App)
}).$mount('#app')

@css 是上一章配置的路径别名

Less具体语法可参考 Less官方文档

配置 sourceMap

在你的项目根目录下,找到 vue.config.js 文件,根据以下内容进行修改:

module.exports = {
  // 配置css相关选项
  css: {
    // 开启 source map
    sourceMap: true
  },
}

Source Map 开启后启动开发环境和生产环境都启用了 Source Map,显然不符合我们的预期。
正常情况下,我们需要在开发环境下启用Source Map,在生产环境下禁用Source Map。

可以通过环境来设置是否开启此功能,代码如下:

css: {
  sourceMap: process.env.NODE_ENV == 'development'
}

一般来说,process.env.NODE_ENV 会在开发环境中被设置为 'development',在生产环境中被设置为'production'。我们通过三目运算判断是否是开发环境,如果是开启反之则关闭即可。

vue.config.js 修改后的完整内容:

const path = require('path')

module.exports = {
  // 静态资源访问路径
  publicPath: './',
  // 指定构建后的输出目录,默认是 'dist'
  outputDir: 'dist',
  // 配置开发服务器选项
  devServer: {
    // 开发服务器启动时是否自动打开浏览器
    open: true,
    // 端口号
    port: 3000
  },
  // 配置css相关选项
  css: {
    // 开启 source map
    sourceMap: process.env.NODE_ENV == 'development'
  },
  // webpack 的配置对象
  configureWebpack: {
    // 配置Webpack模块解析的方式,使得你可以通过模块名字而不是相对路径来引入模块
    resolve: {
      // 设置路径别名
      alias: {
        '@': path.resolve('src'),
        '@public': path.resolve('public'),
        '@img': path.resolve('src/assets/images'),
        '@js': path.resolve('src/assets/scripts'),
        '@css': path.resolve('src/assets/styles')
      }
    }
  }
}

配置完成后,重新启动开发服务器就能看到效果了。

配置 Less 全局变量

在你的项目根目录下,找到 vue.config.js 文件,根据以下内容进行修改:

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // 配置全局变量
          globalVars: {
            'logoName': 'logo'
          }
        }
      }
    }
  }
}

在less中使用配置的变量

.classname {
  background: url('@img/@{logoName}.png');
}



框架搭建整体流程

点击下载步骤 1-7 配置完成的完整 Demo

<think>嗯,用户问的是在Vue项目中,vue.config.js里哪些部分是用来配置Webpack的。我需要先回忆一下Vue CLI和Webpack的关系。Vue CLI内部封装了Webpack,而vue.config.js允许用户自定义配置。接下来,我得想清楚各个配置项对应的Webpack部分。 首先,configureWebpack这个属性,用户可以用对象或者函数来修改Webpack配置。如果是对象,它会合并到默认配置里;函数的话,可以直接修改配置对象。这应该是最直接的部分。 然后是chainWebpack,允许通过链式操作更细粒度地调整配置。比如修改loader选项或者插件。可能用户需要知道如何使用链式API,比如config.module.rule('vue')这样的例子。 接下来,devServer应该对应Webpack的devServer配置,用来设置代理、端口之类的。这部分用户可能经常需要配置,特别是跨域代理的问题。 还有css相关的配置,比如loaderOptions,这里可以传递给CSS相关的loader,比如postcss、sass等。虽然CSS处理是Webpack的一部分,但用户可能不太清楚这些选项具体对应哪个loader。 pluginOptions可能不是直接配置Webpack,而是给Vue CLI插件用的,但有时候插件本身可能会影响Webpack配置,所以需要提一下,但说明它不直接对应Webpack配置。 其他如productionSourceMap、publicPath、outputDir这些,虽然影响构建输出,但属于Vue CLI的配置项,不是直接修改Webpack。不过publicPath对应output.publicPath,outputDir对应output.path,可能需要指出它们的对应关系。 需要确保用户明白哪些配置项直接映射到Webpack的哪些部分,哪些是Vue CLI特有的。另外,要提醒他们查看文档,使用正确的方式修改配置,避免直接覆盖整个配置对象导致问题。可能还需要给出示例,比如如何添加loader或插件,这样用户更容易理解。</think>在 Vue CLI 项目中,`vue.config.js` 中与 Webpack 相关的配置主要包含以下几个核心部分: ```javascript module.exports = { // ================== Webpack 核心配置 ================== configureWebpack: { // 直接合并到最终 Webpack 配置(对象形式) // 相当于 webpack.config.js 中的配置 resolve: { alias: { '@': path.resolve(__dirname, 'src') } }, plugins: [new MyWebpackPlugin()] }, // ================== 链式配置 Webpack ================== chainWebpack: (config) => { // 使用 webpack-chain 语法修改配置 config.module .rule('vue') .use('vue-loader') .tap(options => ({ ...options, compilerOptions: { preserveWhitespace: false } })) }, // ================== 开发服务器配置 ================== devServer: { // 对应 webpack-dev-server port: 8080, proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } } }, // ================== CSS 相关配置 ================== css: { loaderOptions: { // 传递给 CSS 相关 loader sass: { prependData: `@import "@/styles/variables.scss";` }, postcss: { plugins: [require('autoprefixer')()] } } }, // ================== 高级 Webpack 配置 ================== productionSourceMap: false, // 关闭生产环境 source map filenameHashing: true, // 控制文件名哈希 parallel: require('os').cpus().length > 1 // 是否启用多线程构建 } ``` ### 关键配置说明: 1. **configureWebpack**(最常用) - 类型:`对象 | 函数` - 作用:直接合并/修改 Webpack 配置 - 示例场景: ```javascript configureWebpack: { plugins: [new BundleAnalyzerPlugin()], externals: { lodash: '_' // 排除外部依赖 } } ``` 2. **chainWebpack**(更细粒度控制) - 类型:`函数` - 特点:使用 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 语法 - 示例场景: ```javascript chainWebpack: config => { config.optimization.splitChunks({ cacheGroups: { vendor: { test: /[\\/]node_modules[\\/](lodash|moment)[\\/]/, name: 'vendors-lodash-moment' } } }) } ``` 3. **devServer** - 对应 webpack-dev-server 配置 - 常用场景:配置 API 代理、HTTPS、端口等 4. **css.loaderOptions** - 配置 CSS 预处理器参数(Sass/Less/Stylus) - 示例场景:全局注入 SCSS 变量 ### 注意事项: 1. 优先使用 Vue CLI 的**高级配置项**(如`publicPath`、`outputDir`),而不是直接修改 Webpack 配置 2. 修改 Webpack 配置前,建议先查看 [Vue CLI 文档](https://cli.vuejs.org/zh/config/) 确认是否有现成的配置项 3. 使用 `vue inspect > output.js` 命令可输出最终 Webpack 配置 ### 典型场景示例: ```javascript // 添加新的 loader chainWebpack: config => { config.module .rule('yaml') .test(/\.ya?ml$/) .use('yaml-loader') .loader('yaml-loader') .end() } // 修改现有 loader chainWebpack: config => { config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() } ``` 建议通过渐进式配置:先尝试 Vue CLI 的顶层配置,必要时再使用底层 Webpack 配置。保持配置的简洁性和可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值