vue-cli 4.0项目搭建

1. 首先正常搭建项目：选用的是2.x模板

2. 添加vue.config.js（基础版）

const path = require('path')
// const fs = require('fs')

function resolve(dir) {
	return path.join(__dirname, dir)
}

module.exports = {
	publicPath: './', // 公共,基本路径
	outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist', // 输出文件目录，不同的环境打不同包名
	assetsDir: './', // 资源路径
	chainWebpack: config => { // 路径别名
		config.resolve.alias
			.set('@', resolve('src'))
			.set('@images', resolve('src/assets/images'))
	},
	devServer: {
		port: 8080,
		host: "localhost", // 0.0.0.0
		open: true, // 配置自动启动浏览器
		overlay: {
			warnings: true,
			errors: true
		},
		// 配置代理,
		proxy: {
			"/devProxy": {
				target: 'http://192.168.122.100:20105/dms/',
				changeOrigin: true
			},
		},
	}
}

3. 关于less的使用，以及less全局变量的使用

注意：这里有多种实现方式，例如sass-resource-loader、style-resources-loader、vue-cli-plugin-style-resources-loader等，这里选择了最简单的方式，即不使用任何其他插件，直接最初项目搭建的时候就添加了css预处理器less、lessloader

vue.config.js中module.exports中添加：

css: {
	loaderOptions: {
	less: {
		javascriptEnabled: true,
		globalVars: {
                                hack: `true; @import '~@/styles/variable.less';`
		},
            }
	}
     },

这里hack:true;后为导入需要全局声明的less文件

4. webpack-theme-color-replacer换肤

webpack-theme-color-replacer是一个webpack插件，跟vue关系不大；其核心逻辑是通过js替换颜色路径等内容，和传统更换css类等不一样；简单使用方式如下：

vue.config.js中module.exports中添加：

// 自定义换肤
config.plugin('webpack-theme-color-replacer')
			.use(ThemeColorReplacer)
			.tap(options => {
				options[0] = {
					matchColors: ['#406767', '#3a6a6b', '#232323'], // 需要全css查找的颜色数组, 支持 rgb and hsl.
					fileName: 'css/theme-colors-[contenthash:8].css', //optional. output css file name, suport [contenthash] and [hash].
					injectCss: false, // optional. Inject css text into js file, no need to download `theme-colors-xxx.css` any more.
					isJsUgly: process.env.NODE_ENV!=='development', 				}
				return options
			})

提供换肤功能的组件中：可以通过client.changer.changeColor(options, Promise).then(() => {})来实现换肤，以下为提供的mixin例子

// 供换肤功能使用，可用于替换颜色，路径等，具体为options内参数
import client from 'webpack-theme-color-replacer/client'

export default {
  data() {
    return {
      exampleOptions: {
        newColors: ['#04cf04', '#04cf04', '#1d1d1d']
      }
    }
  },
  methods: {
    _switchColor(options) {
      client.changer.changeColor(options, Promise).then(() => {
        this.$Message.success('切换颜色成功')
        localStorage.setItem('nowSkin', JSON.stringify(options))
      })
    }
  },
  created() {
    let skin = localStorage.getItem('nowSkin') ? JSON.parse(localStorage.getItem('nowSkin')) : {};
    if(!this.$commonjs.objectEmpty(skin)){
      this.nowSkin = skin
    }
    client.changer.changeColor(this.nowSkin).then(() => {})
  }
}

5. 关于多环境配置

1. 在根目录下新建以.env开头的文件，后缀为你需要的环境
2. 在package.json中 scripts的对象中，声明一个运行你目标环境的指令
3. 你可以在.env.xxx的文件中书写该环境的配置项，baseUrl等。

注意：.env.xxx文件中书写的配置变量只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。 详情见vue官网

  "scripts": {
    "serve": "vue-cli-service serve",
    "local": "vue-cli-service serve --mode local",
    "serve:mock": "vue-cli-service serve --mode mock",
    "prod": "vue-cli-service build --mode production",
    "build": "vue-cli-service build"
  },

对应的