规范开发目录 及 webpack多环境打包文件配置

Posted 2021-11-01 liulijun

规范开发目录

普通项目 开发目录：

├── project-name                                                                                                                                                     
├── README.md           
├── .gitignore                                                                                                                                        
├── assets                                                                                                                                                          
├── ├── js                                                                                                                                                      
├── ├── css
├── ├── images 
├── ├── fonts
├── index.html 

vue 项目开发目录：
├── build
├── config
├── dist
├── src
├──├── api
├──├── assets
├──├──├── js
├──├──├── style
├──├──├──├── base-commonsless
├──├──├──├── commonsless
├──├──├──├── pagesless
├──├── style.less   //import 所有less
├──├── components
├──├──├── base-commons
├──├──├── commons
├──├──├── pages
├──├── router
├──├── store
├──├── APP.vue
├──├── main.js
├── static
├──├──i mages
├── README.md
├── .gitignore
├── package.json
├── .babelrc  

webpack多环境打包文件配置

通常分为3种环境：
dev //开发及测试环境
prep //预发布环境
prod //生产环境

1. config文件夹下index.js


　　build对象增加属性

prodEnv: require(‘./prod.env‘),//生产环境
devEnv: require(‘./dev.env‘),//开发及测试环境
prepEnv: require(‘./prep.env‘),//预发布环境

config文件夹下要包含这三个js  文件；分别为：dev.env.js   prep.env.js   prod.env.js;

这三个文件主要是定义生产环境及开发环境，并且用 NODE_ENV 和 env_config定义环境变量

2.配置 package.json 文件

scripts对象增加命令： 

"build:dev": "cross-env NODE_ENV=XXX env_config=XXX node build/build.js",

 

（windows下安装 cross-env包）；

3.更改 build文件的配置

build  文件是把配置直接定义成生产环境的常量，我们改成一个变量的形式；

const spinner = ora(‘building for ‘ + process.env.NODE_ENV + ‘ of ‘ + process.env.env_config+ ‘ mode...‘ )

接口配置直接更改process.env.NODE_ENV的值就可以分环境打包了。

 

 
let REQUEST_URL = "https://test.com/dev/";  
if (process.env.NODE_ENV === ‘development‘ ) {    
  REQUEST_URL = "https://test.com/dev/"; 
}else if(process.env.NODE_ENV === ‘production‘ ){  
 REQUEST_URL = "https://test.com/prod/"; 
}else if(process.env.NODE_ENV === ‘preparation‘){   
 REQUEST_URL = "https://test.com/prep/"; 
}