Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。vue-webpack-boilerplate，官方定义为：full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.本文主要介绍了浅谈Vue-cli 命令行工具分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
目录结构：
├── README.md
├── build
│ ├── build.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static
config 环境配置
config 配置文件用来配置 devServer 的相关设定，通过配置 NODE_ENV 来确定使用何种模式（开发、生产、测试或其他）
config
|- index.js #配置文件
|- dev.env.js #开发模式
|- prod.env.js #生产模式
index.js
输出目录
assetsPublicPath: '/', // publicPath：指定资源文件引用的目录
proxyTable: {}, // 代理示例： proxy: [{context: ["/auth", "/api"],target: "http://localhost:3000",}]
// 开发服务器变量设置
host: 'localhost',
port: 8080,
autoOpenBrowser: true, // 自动打开浏览器devServer.open
errorOverlay: true, // 浏览器错误提示 devServer.overlay
notifyOnErrors: true, // 配合 friendly-errors-webpack-plugin
poll: true, // 使用文件系统(file system)获取文件改动的通知devServer.watchOptions
// source map
cssSourceMap: false, // develop 下不生成 sourceMap
devtool: 'eval-source-map' // 增强调试 可能的推荐值：eval, eval-source-map(推荐), cheap-eval-source-map, cheap-module-eval-source-map 详细：https://doc.webpack-china.org/configuration/devtool
},
build: {
// index模板文件
index: path.resolve(__dirname, '../dist/index.html'),
// 路径
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// bundleAnalyzerReport
bundleAnalyzerReport: process.env.npm_config_report,
// Gzip
productionGzip: false, // 默认 false
productionGzipExtensions: ['js', 'css'],
// source map
productionSourceMap: true, // production 下是生成 sourceMap
devtool: '#source-map' // devtool: 'source-map' ?
}
}
dev.env.js
build Webpack配置
build
|- utils.js #代码段
|- webpack.base.conf.js #基础配置文件
|- webpack.dev.conf.js #开发模式配置文件
|- webpack.prod.conf.js #生产模式配置文件
|- build.js #编译入口
实用代码段 utils.js
基础配置文件 webpack.base.conf.js
基础的 webpack 配置文件主要根据模式定义了入口出口，以及处理 vue, babel 等的各种模块，是最为基础的部分。其他模式的配置文件以此为基础通过 webpack-merge 合并。
开发模式配置文件 webpack.dev.conf.js
开发模式的配置文件主要引用了 config 对于 devServer 的设定，对 css 文件的处理，使用 DefinePlugin 判断是否生产环境，以及其他一些插件。
生产模式配置文件 webpack.prod.conf.js
build.js 编译入口
输出编译文件
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n');
//error
if (stats.hasErrors()) {
console.log(chalk.red(' 编译失败出现错误.\n'));
process.exit(1);
}
//完成
console.log(chalk.cyan(' 编译成功.\n'))
console.log(chalk.yellow(
' file:// 无用，需http(s)://.\n'
))
})
})
