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'
))
})
})
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
