浅谈Vue-cli命令行工具

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' )) }) })

相关推荐：

PHP命令行

linux命令行汇总

关于webpack命令行的详细介绍

以上就是浅谈Vue-cli 命令行工具的详细内容，更多请关注Gxl网其它相关文章！