vue-cli 結構
阿新 • • 發佈：2017-07-07
文件路徑 script hub 入口 編譯配置 host 資源文件 false 源文件
.
|-- build // 項目構建(webpack)相關代碼 | |-- build.js // 生產環境構建代碼 | |-- check-version.js // 檢查node、npm等版本 | |-- dev-client.js // 熱重載相關 | |-- dev-server.js // 構建本地服務器 | |-- utils.js // 構建工具相關 | |-- webpack.base.conf.js // webpack基礎配置重要文件package.json
ackage.json文件是項目根目錄下的一個文件，定義該項目開發所需要的各種模塊以及一些項目配置信息（如項目名稱、版本、描述、作者等）。
package.json 裏的scripts字段，這個字段定義了你可以用npm運行的命令。在開發環境下，在命令行工具中運行npm run dev 就相當於執行 node build/dev-server.js .也就是開啟了一個node寫的開發行建議服務器。由此可以看出script字段是用來指定npm相關命令的縮寫。
"scripts": {
"dev": "node build/dev-server.js", "build": "node build/build.js" },dependencies字段和devDependencies字段
- dependencies字段指項目運行時所依賴的模塊；
- devDependencies字段指定了項目開發時所依賴的模塊；
在命令行中運行npm install命令，會自動安裝dependencies和devDempendencies字段中的模塊。package.json還有很多相關配置
webpack配置相關
我們在上面說了運行npm run dev 就相當於執行了node build/dev-server.js,說明這個文件相當重要，先來熟悉一下它。
dev-server.js
// 檢查 Node 和 npm 版本
require(‘./check-versions‘)() // 獲取 config/index.js 的默認配置 var config = require(‘../config‘) // 如果 Node 的環境無法判斷當前是 dev / product 環境 // 使用 config.dev.env.NODE_ENV 作為當前的環境 if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) // 使用 NodeJS 自帶的文件路徑工具 var path = require(‘path‘) // 使用 express var express = require(‘express‘) // 使用 webpack var webpack = require(‘webpack‘) // 一個可以強制打開瀏覽器並跳轉到指定 url 的插件 var opn = require(‘opn‘) // 使用 proxyTable var proxyMiddleware = require(‘http-proxy-middleware‘) // 使用 dev 環境的 webpack 配置 var webpackConfig = require(‘./webpack.dev.conf‘) // default port where dev server listens for incoming traffic // 如果沒有指定運行端口，使用 config.dev.port 作為運行端口 var port = process.env.PORT || config.dev.port // Define HTTP proxies to your custom API backend // https://github.com/chimurai/http-proxy-middleware // 使用 config.dev.proxyTable 的配置作為 proxyTable 的代理配置 var proxyTable = config.dev.proxyTable // 使用 express 啟動一個服務 var app = express() // 啟動 webpack 進行編譯 var compiler = webpack(webpackConfig) // 啟動 webpack-dev-middleware，將 編譯後的文件暫存到內存中 var devMiddleware = require(‘webpack-dev-middleware‘)(compiler, { publicPath: webpackConfig.output.publicPath, stats: { colors: true, chunks: false } }) // 啟動 webpack-hot-middleware，也就是我們常說的 Hot-reload var hotMiddleware = require(‘webpack-hot-middleware‘)(compiler) // force page reload when html-webpack-plugin template changes compiler.plugin(‘compilation‘, function (compilation) { compilation.plugin(‘html-webpack-plugin-after-emit‘, function (data, cb) { hotMiddleware.publish({ action: ‘reload‘ }) cb() }) }) // proxy api requests // 將 proxyTable 中的請求配置掛在到啟動的 express 服務上 Object.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === ‘string‘) { options = { target: options } } app.use(proxyMiddleware(context, options)) }) // handle fallback for HTML5 history API // 使用 connect-history-api-fallback 匹配資源，如果不匹配就可以重定向到指定地址 app.use(require(‘connect-history-api-fallback‘)()) // serve webpack bundle output // 將暫存到內存中的 webpack 編譯後的文件掛在到 express 服務上 app.use(devMiddleware) // enable hot-reload and state-preserving // compilation error display // 將 Hot-reload 掛在到 express 服務上 app.use(hotMiddleware) // serve pure static assets // 拼接 static 文件夾的靜態資源路徑 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) // 為靜態資源提供響應服務 app.use(staticPath, express.static(‘./static‘)) // 讓我們這個 express 服務監聽 port 的請求，並且將此服務作為 dev-server.js 的接口暴露 module.exports = app.listen(port, function (err) { if (err) { console.log(err) return } var uri = ‘http://localhost:‘ + port console.log(‘Listening at ‘ + uri + ‘\n‘) // when env is testing, don‘t need open it // 如果不是測試環境，自動打開瀏覽器並跳到我們的開發地址 if (process.env.NODE_ENV !== ‘testing‘) { opn(uri) } })webpack.base.confg.js webpack的基礎配置文件
module.export = {
// 編譯入口文件 entry: {}, // 編譯輸出路徑 output: {}, // 一些解決方案配置 resolve: {}, resolveLoader: {}, module: { // 各種不同類型文件加載器配置 loaders: { ... ... // js文件用babel轉碼 { test: /\.js$/, loader: ‘babel‘, include: projectRoot, // 哪些文件不需要轉碼 exclude: /node_modules/ }, ... ... } }, // vue文件一些相關配置 vue: {} }npm run build 部署 是將Vue網頁放到服務器上
我們在命令行中輸入npm run build命令後，vue-cli會自動進行項目發布打包。你在package.json文件的scripts字段中可以看出，你執行的npm run build命令就相對執行的 node build/build.js 開發使用 npm run dev 項目根目錄生成了dist文件夾，這個文件夾裏邊就是我們要傳到服務器上的文件。
dist文件夾下目錄包括：
- index.html 主頁文件:因為我們開發的是單頁web應用，所以說一般只有一個html文件。
- static 靜態資源文件夾：裏邊js、CSS和一些圖片。
vue-cli 結構