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

安装

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

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

框架搭建整体流程

• 第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架
• 第二步 Vue2 vue.config.js 基础配置，路径别名alias
• 第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局变量
• 第四步 Vue2 配置ESLint
• 第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩
• 第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui
• 第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin

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