目录

1.1 命令行初始化项目

1.2 分析项目目录

1.3 运行项目

1.4 多环境配置打包发布

---

一. vue-cli2 + webpack搭建项目流程以及打包发布流程

最近升级到vue-cli3，发现vue-cli2搭建项目命令不能用了，两者搭建开发环境项目内容也发生了变化。

vue-cli2搭建项目环境的命令：vue init webpack vue2-webpack-project

vue-cli2升级到vue-cli3的时候，vue init 命令不能用了，如果还想使用vue init命令，需要全局添加一个@vue/cli-init工具包。

yarn global add @vue/cli-init

npm install -g @vue/cli-init

1.1 命令行初始化项目

vue init webpack vue-webpack

? Project name vue-webpack    // 项目名称
? Project description vue-cli2+webpack模版    // 项目注释
? Author 一座岛               // 作者
? Vue build standalone
? Install vue-router? Yes    // 加载依赖vue-router
? Use ESLint to lint your code? Yes  // 是否添加eslint到你项目中，格式化代码，规范代码格式统一，检验代码合法性。
? Pick an ESLint preset Standard    // 采用eslint标准
? Set up unit tests No    //    是否开启单元测试
? Setup e2e tests with Nightwatch? No    // 是否开启端到端测试
? Should we run `npm install` for you after the project has been created? (recommended) yarn // 选择npm ，yarn 依赖包管理工具

1.2 分析项目目录

  

-->build目录：用于存放 webpack 相关配置和脚本。

-->config目录：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。

-->index.html：设置项目的一些meta头信息和提供<div id="app"></div>用于挂载 vue 节点。

-->node_modules目录：存放项目中下载好的依赖工具包。

-->package.json文件：

     存放项目名称，版本号，dependencies和devDependencies声明了需要引用的依赖包，启动、打包项目的命令管理等。

-->src目录：我们开发的页面和资源可以放在这里。

    src下main.js：vue-cli工程的入口文件。

    src下app.vue：使用标签<route-view></router-view>渲染整个工程的.vue组件

-->static目录：存放一些静态文件。

1.3 运行项目

第一次初始化项目，终端对话框中，需要进入到项目目录中，执行两条命令yarn install , yarn run dev

没有新依赖包加入到项目中，直接执行yarn run dev就可以了。

1.4 多环境配置打包发布

1. 下载cross-env依赖包：yarn add cross-env --s-dev
2.  package.json文件中准备不同环境打包命令
   1. build:prod：生产环境, cross-env命令后面NODE_ENV=production，表示给process.env.NODE_ENV=production
   2. build:test：测试环境。
   3. build:test2：测试环境2，这里需要注意NODE_ENV=test，会影响打包的文件大小。

     注意点：build目录->utils.js，webpack.base.conf.js，vue-loader.conf.js中使用到了if(process.env.NODE_ENV===production)判断语句来做配置，NODE_ENV!=production时候会影响打包文件大小。我们打包命令中统一添加NODE_ENV=production。

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "prod": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build:test2": "cross-env env_config=test node build/build.js"
  },

     3.  config目录中添加test.env.js文件，并对index.js中build属性编辑。

   

'use strict'

const path = require('path')

let assetsRoot = path.resolve(__dirname, '../dist')
// 可以根据不同的打包环境，指定包的输出路径。
if(process.env.env_config === 'prod'){
  assetsRoot = path.resolve(__dirname, '../dist')
}else if(process.env.env_config === 'test'){
  assetsRoot = path.resolve(__dirname, '../test')
}else {
  assetsRoot = path.resolve(__dirname, '../nathing')
}

module.exports = {
  // dev....

  build: {
    prodEnv: require('./prod.env'),
    testEnv:require('./test.env'),
    // Template for index.html
    index: assetsRoot+'/index.html',

    // Paths
    assetsRoot: assetsRoot,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

    4. build目录中修改build.js，webpack.prod.conf.js文件。

        build.js文件中删除一行代码：

        process.env.NODE_ENV='production'

        webpack.prod.conf.js文件中替换一行代码：

         const env = require('../config/prod.env'）替换成 config.build[process.env.env_config+'Env']

     5. 运行打包命令

yarn run build:prod

yarn run build:test

      6. 发布项目

6.1 方案1：

第一步：开发人员将开发完项目上传gitLab上，

第二步：构建服务器拉去gitLab上正式环境分支，进行下载依赖，构建，压缩，构建后的发布包会被传到中转站服务器：文件管理服务器集群。

第三步：运行服务器（可能是多台）会从文件服务器中拉去对应版本的相同压缩包，并解压运行。

参考地址：https://www.jb51.net/article/131307.htm

6.2 方案2：自动部署平台jenkins，其内部原理同方案1。可以手动部署，也可以自动部署。根据gitLab提交或合并请求。