Vue-cli 框架的多目录项目配置、打包

香菊网 发表于: 2019-08-06 分类: H5部分  前端front  js部分  

使用场景:git地址 :https://github.com/liuguangqing/mult_vue_h5#build-setup

在我们开发h5的时候有时候发布的时候会遇到前端相互独立的活动类h5开发,而这些H5的一些基础配置以及一些公用组件和用户接口都是一模一样的,

当量多的时候,如果每次都init一个新的项目,把之前的公用代码copy过去,这样的话就会造成代码雍俞。

 

此文章是vue-cli 2.* 版本打包 如果需要vue-cli 3.*多目录配置配置 请移步

 

我们现在可以用一个vue-cli 去管理多个相同的项目

我们希望的是在电脑上安装了一次依赖 直接去运行多个项目1、项目2、项目3 的时候 可以:

npm run dev project1

npm run dev project2

...

打包

npm run build project1

npm run build project2

...

就可以分别运行我们的项目

我们先创建一个简单的Vue-cli  @2.*

一、配置项目

1、修改 config/index.js

module.exports = {}  上面增加如下代码:(获取输入的命令的目录名称)

const projectDir = process.argv[process.argv.length - 1].replace(/^(S)*=/, '')
if(!projectDir){
  console.log('> 项目名称不能为空')
  return;
}

module.exports = {}  中找到 build  节点中的 index  assetsRoot 修改如下代码:(打包 dist/project/...)

index: path.resolve(__dirname, '../dist/'+ projectDir + '/' +'index.html'),
assetsRoot: path.resolve(__dirname, '../dist/'+ projectDir ),

2、修改build/webpack.base.conf.js

module.exports = {}  上面增加如下代码:(获取输入的命令的目录名称)

const projectDir = process.argv[process.argv.length - 1].replace(/^(S)*=/, '')
if(!projectDir){
  console.log('> 项目名称不能为空')
  return;
}

module.exports = {}  中找到 entry  节点中的 app 修改如下:(修改入口文件路径)

entry: {
    // app: './src/main.js'
    //**入口文件**
    app: './src/'+ projectDir + '/main.js'
},

resolve  节点中的 alias 修改如下 (修改 组件之间相互引用时的路径)

alias: {
   'vue$': 'vue/dist/vue.esm.js',
   // '@': resolve('src'),
   '@': resolve('src/'+ projectDir)
}

3、修改build/webpack.prod.conf.js

const webpackConfig = merge(baseWebpackConfig, {}  上面增加如下代码:(获取输入的命令的目录名称)

const projectDir = process.argv[process.argv.length - 1].replace(/^(S)*=/, '')
if(!projectDir){
  console.log('> 项目名称不能为空')
  return;
}

找到  new HtmlWebpackPlugin({})   修改  template  值如下: (html模板所在的文件路径)

template: 'src/'+ projectDir +'/index.html',

4、修改build/webpack.dev.conf.js

const devWebpackConfig = merge(baseWebpackConfig, {}  上面增加如下代码:(获取输入的命令的目录名称)

const projectDir = process.argv[process.argv.length - 1].replace(/^(S)*=/, '')
if(!projectDir){
  console.log('> 项目名称不能为空')
  return;
}

找到  new HtmlWebpackPlugin({})   修改  template  值如下: (html模板所在的文件路径)

template: 'src/'+ projectDir +'/index.html',

5、创建文件   build/devServer.js  内容如下: (运行cmd命令文件)

const cprocess = require('child_process')
let entryDir = process.argv[process.argv.length-1]
let cmd = 'npm run startdev -- --env.name=' + entryDir 
let dev = cprocess.exec(cmd, {detached: true} ,function(error, stdout, stderr) {
        if(error) console.log(error)   
})

dev.stdout.pipe(process.stdout)
dev.stderr.pipe(process.stderr)

6、修改 package.json 文件  找到 scripts 节点 修改如下:(修改 npm 运行脚本)

"scripts": {
    "dev": "node build/devServer.js",
    "startdev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
},

二、修改目录结构

1、在src 目录下创建项目目录 比如 project1

2、把原有项目中的App.vue、index.html、main.js文件和 router、assets、components目录全部移动到  该项目文件夹下

至此完成:

## 目录结构

    ├── build
    │   ├── devServer.js            // cmd运行文件
    │   ├── base.conf.js            // 开发环境
    │   ├── prod.conf.js            // 线上环境
    │   └── build.js                // 打包入口文件
    ├── config                  // 配置文件
    │   ├── index.js                // 配置打包
    ├── dist                    // 打包好的资源
    ├── src                     // 入口
    │   ├── common              // 公共组件
    │   ├── projects1               // 项目入口文件
    │   ├── projects2               // 公共资源文件
    │   │   ├──assets                   // 插件文件
    │   │   ├──components               // 组件
    │   │   ├──page                     // 页面
    │   │   ├──store                    // vuex
    │   │   ├──router                   // 路由
    │   │   ├──App.vue                  // 入口
    │   │   ├──index.html               // html文件
    │   │   └──main.js                  // main配置
    │   ├── ...               
    ├── static                  // 静态文件
    ├── package.json            // webpack

三、使用命令

和平时一样命令 在后面 加上你的项目文件夹的名字即可

npm run dev project1
npm run build project1
标签: H5部分前端frontjs部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮