欢迎光临
我的个人博客网站

vue3.0-vue-cli开发环境中如何改变vue.config.js来构建相同项目不同主题

思考:同一个项目不同客户对应的主题不一样,该如何来配置,能够快速便捷的构建(build)不同主题?

1、大部分都会想到把主题提取到单独的css文件(css预编译语言:less,stylus,scss)分包管理,这是必须的

2、如果是多语言,每个客户对应的中文略有不同,也要拆分管理

拆分之后该如何添加配置来一次性配置永久使用呢?总不能每次build都要手动改变下入口文件吧(费时费力)~~

 

思路:新版vue-cli开发脚手架说是0配置,但是需要添加配置还是的改编vue.config.js,再结合nodejs来实现上面的最优解决方案

 

举例说明:

1. 首先我们在package.json中scripts部分添加不同的变量入口,THEME_PATH是入口处定义一个node环境变量,这样在npm run dev:dajiang之后,vue.config.js中就能读取到process.env.THEME_PATH的值等于dajiang(关于node参考http://nodejs.cn/api/),此处需要安装:npm install -D cross-env

vue3.0-vue-cli开发环境中如何改变vue.config.js来构建相同项目不同主题

 

 

 

2. 在vue.config.js中拿到process.env.THEME_PATH的值之后,我们来添加webpack的配置到vue.config.js中

'use strict' const path = require('path')  function resolve(dir) {   return path.join(__dirname, dir) }  const themeSrc = process.env.THEME_PATH || 'default'  // All configuration item explanations can be find in https://cli.vuejs.org/config/ module.exports = {   // 自定义webpack的配置   configureWebpack: {     // provide the app's title in webpack's name field, so that     // it can be accessed in index.html to inject the correct title.     name: name,     resolve: {       alias: {         // 配置别名让所有访问:themePath的路径使用变量控制         'themePath': resolve(`src/styles/theme/${themeSrc}`)       }     }   } } 

 

3. 上面配置完成之后路径配置已经完成,剩下的就是去添加对应的客户主题和引入使用了,如下:styles/theme/default对应默认主题,与package.json中的dev对应,default/index.js对应该主题的多语言等其他配置,default/index.scss对于默认的主题(scss变量)

vue3.0-vue-cli开发环境中如何改变vue.config.js来构建相同项目不同主题

 

 

 

 

 4. 使用起来就很简单了,因为配置之后只要遇到访问:themepath的路径就会读取配置的路径,如:

vue3.0-vue-cli开发环境中如何改变vue.config.js来构建相同项目不同主题

 

 这样就会读取你在npm run dev:xx,npm run build:xx后面的参数,读取js类似,而且即使在组件内部import veriables.scss直接使用变量也可以。

 

 

 

 

 

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » vue3.0-vue-cli开发环境中如何改变vue.config.js来构建相同项目不同主题
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏