vue 目錄結構與文件配置說明

時間 2019-11-11

原文原文鏈接

目錄結構與文件配置說明

首先對目錄結構進行說明，

1.build目錄，主要利用webpack與node插件啓動一些相關服務的js文件

2.config目錄主要是針對開發環境，生產環境，測試環境的配置信息

3.src是咱們本身開發時的源碼目錄（可指定修更名稱）

4.static是一些第三方庫的包用到的靜態資源目錄（可指定修更名稱）

說明每一個文件：

主要入口文件，dev-server.js文件，幾乎每一句話都進行了註釋，有些地方，涉及了其餘關聯文件，下面也會有相應的註釋的方式

// 引入檢查版本js模塊  
require('./check-versions')()  
// 引入配置文件信息模塊  
var config = require('../config')  
// 判斷開發環境  
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)  
// 引入nodejs的path模塊，進行一些路徑的操做，詳情能夠查看node官方的api  
var path = require('path')  
// 引入nodejs的一個框架express,能夠幫助咱們快速搭建一個node服務 github https://github.com/expressjs/express  
var express = require('express')  
// 引入node爲webpack提供的一個模塊服務 github https://github.com/webpack/webpack  
var webpack = require('webpack')  
// 能夠指定打開指定的url使用指定的瀏覽器或者應用，詳情能夠去看一下github https://github.com/sindresorhus/opn  
var opn = require('opn')  
// 一個能夠設置幫助咱們進行服務器轉發代理的中間件 https://github.com/chimurai/http-proxy-middleware  
var proxyMiddleware = require('http-proxy-middleware')  
// 根據當前啓動環境選擇加載相應的配置文件，webpack.prod.conf與webpack.dev.conf文件的說明後面也有  
var webpackConfig = process.env.NODE_ENV === 'testing'  
  ? require('./webpack.prod.conf')  
  : require('./webpack.dev.conf')  
  
// 端口號的設置  
var port = process.env.PORT || config.dev.port  
// 獲取須要代理的服務api  
// https://github.com/chimurai/http-proxy-middleware  
var proxyTable = config.dev.proxyTable  
// 啓動一個express服務  
var app = express()  
// 加載webpack配置  
var compiler = webpack(webpackConfig)  
// webpack的開發中間件，專門爲webpack提供的一個簡單的中間件，可讓文件都加載內存中，不去讀寫硬盤，而且當文件被改動的時候，不會刷新頁面就會部署成功  
var devMiddleware = require('webpack-dev-middleware')(compiler, {  
  publicPath: webpackConfig.output.publicPath,  
  quiet: true  
})  
// 一個爲webpack提供的熱部署中間件。https://github.com/glenjamin/webpack-hot-middleware  
var hotMiddleware = require('webpack-hot-middleware')(compiler, {  
  log: () => {}  
})  
// 當html被改變的時候，讓html被強制部署，使用這個中間件html-webpack-plugin，https://github.com/ampedandwired/html-webpack-plugin  
compiler.plugin('compilation', function (compilation) {  
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {  
    hotMiddleware.publish({ action: 'reload' })  
    cb()  
  })  
})  
  
// 遍歷代理的配置信息,而且使用中間件加載進去  
Object.keys(proxyTable).forEach(function (context) {  
  var options = proxyTable[context]  
  if (typeof options === 'string') {  
    options = { target: options }  
  }  
  app.use(proxyMiddleware(context, options))  
})  
  
// 當訪問找不到的頁面的時候，該中間件指定了一個默認的頁面返回https://github.com/bripkens/connect-history-api-fallback  
app.use(require('connect-history-api-fallback')())  
  
// 使用中間件  
app.use(devMiddleware)  
  
// 熱部署  
app.use(hotMiddleware)  
  
// 根據配置信息拼接一個目錄路徑，而後將該路徑下的文件交給express的靜態目錄管理  
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)  
app.use(staticPath, express.static('./static'))  
  
var uri = 'http://localhost:' + port  
  
devMiddleware.waitUntilValid(function () {  
  console.log('> Listening at ' + uri + '\n')  
})  
// 導出的對象  
module.exports = app.listen(port, function (err) {  
  if (err) {  
    console.log(err)  
    return  
  }  
  
  // when env is testing, don't need open it  
  if (process.env.NODE_ENV !== 'testing') {  
    opn(uri)  
  }  
})

webpack.base.conf.js

var path = require('path')  
var config = require('../config')  
// 工具類，下面會用到  
var utils = require('./utils')  
// 工程目錄，就是當前目錄build的上一層目錄  
var projectRoot = path.resolve(__dirname, '../')  
  
var env = process.env.NODE_ENV  
// 是否在開發環境中使用cssSourceMap,默認是false,該配置信息在config目錄下的index.js中能夠查看  
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)  
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)  
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd  
// 導出的對象，就是webpack的配置項，詳情能夠參考的webpack的配置說明，這裏會將出現的都一一說明一下  
module.exports = {  
  // 指明入口函數  
  entry: {  
    app: './src/main.js'  
  },  
  // 輸出配置項  
  output: {  
    // 路徑，從config/index讀取的，值爲：工程目錄下的dist目錄，須要的自定義的也能夠去修改  
    path: config.build.assetsRoot,  
    // 發佈路徑，這裏是的值爲/，正式生產環境多是服務器上的一個路徑,也能夠自定義  
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,  
    filename: '[name].js'  
  },  
  // 配置模塊如何被解析，就是import或者require的一些配置  
  resolve: {  
    // 當使用require或者import的時候，自動補全下面的擴展名文件的擴展名，也就是說引入的時候不須要使用擴展名  
    extensions: ['', '.js', '.vue', '.json'],  
    // 當咱們require的東西找不到的時候，能夠去node_modules裏面去找，  
    fallback: [path.join(__dirname, '../node_modules')],  
    // 別名,在咱們require的時候，可使用這些別名，來縮短咱們須要的路徑的長度  
    alias: {  
      'vue$': 'vue/dist/vue.common.js',  
      'src': path.resolve(__dirname, '../src'),  
      'assets': path.resolve(__dirname, '../src/assets'),  
      'components': path.resolve(__dirname, '../src/components')  
    }  
  },  
  // 同上  
  resolveLoader: {  
    fallback: [path.join(__dirname, '../node_modules')]  
  },  
  // 對相應文件的編譯使用什麼工具的配置  
  module: {  
    // loader以前的配置，會對.vue,.js的文件用eslint進行編譯,include是包含的文件，exclude是排除的文件，可使用的正則  
    preLoaders: [  
      {  
        test: /\.vue$/,  
        loader: 'eslint',  
        include: [  
          path.join(projectRoot, 'src')  
        ],  
        exclude: /node_modules/  
      },  
      {  
        test: /\.js$/,  
        loader: 'eslint',  
        include: [  
          path.join(projectRoot, 'src')  
        ],  
        exclude: /node_modules/  
      }  
    ],  
    // 這裏也是相應的配置，test就是匹配文件，loader是加載器，  
    // query比較特殊，當大小超過10kb的時候，會單獨生成一個文件，文件名的生成規則是utils提供的方法，當小於10kb的時候，就會生成一個base64串放入js文件中  
    loaders: [  
      {  
        test: /\.vue$/,  
        loader: 'vue'  
      },  
      {  
        test: /\.js$/,  
        loader: 'babel',  
        include: [  
          path.join(projectRoot, 'src')  
        ],  
        exclude: /node_modules/  
      },  
      {  
        test: /\.json$/,  
        loader: 'json'  
      },  
      {  
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,  
        loader: 'url',  
        query: {  
          limit: 10000,  
          name: utils.assetsPath('img/[name].[hash:7].[ext]')  
        }  
      },  
      {  
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,  
        loader: 'url',  
        query: {  
          limit: 10000,  
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')  
        }  
      }  
    ]  
  },  
  // eslint的配置  
  eslint: {  
    formatter: require('eslint-friendly-formatter')  
  },  
  // vue-loader的配置  
  vue: {  
    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),  
    postcss: [  
      require('autoprefixer')({  
        browsers: ['last 2 versions']  
      })  
    ]  
  }  
}

webpack.dev.comf.js

var config = require('../config')  
var webpack = require('webpack')  
// https://github.com/survivejs/webpack-merge 提供一個合併生成新對象函數  
var merge = require('webpack-merge')  
var utils = require('./utils')  
var baseWebpackConfig = require('./webpack.base.conf')  
var HtmlWebpackPlugin = require('html-webpack-plugin')  
var FriendlyErrors = require('friendly-errors-webpack-plugin')  
  
// 在瀏覽器不刷新的狀況下，也能夠看到改變的效果，若是刷新失敗了，他就會自動刷新頁面  
Object.keys(baseWebpackConfig.entry).forEach(function (name) {  
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])  
})  
  
module.exports = merge(baseWebpackConfig, {  
  module: {  
    // 後面會有對utils的解釋,這裏是對單獨的css文件，用相應的css加載器來解析  
    loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })  
  },  
  // 在開發模式下，能夠在webpack下面找到js文件，在f12的時候，  
  devtool: '#eval-source-map',  
  // 將webpack的插件放入  
  plugins: [  
    // 經過插件修改定義的變量  
    new webpack.DefinePlugin({  
      'process.env': config.dev.env  
    }),  
    // webpack優化的這個一個模塊，https://github.com/glenjamin/webpack-hot-middleware#installation--usage  
    new webpack.optimize.OccurrenceOrderPlugin(),  
    // 熱加載  
    new webpack.HotModuleReplacementPlugin(),  
    // 當編譯出現錯誤的時候，會跳過這部分代碼  
    new webpack.NoErrorsPlugin(),  
    // filename生成的文件名，template是模版用的文件名,https://github.com/ampedandwired/html-webpack-plugin  
    new HtmlWebpackPlugin({  
      filename: 'index.html',  
      template: 'index.html',  
      // 讓打包生成的html文件中css和js就默認添加到html裏面，css就添加到head裏面，js就添加到body裏面  
      inject: true  
    }),  
    new FriendlyErrors()  
  ]  
})

utils.js和config目錄下面的js文件都比較好辨認是幹什麼的，config下面都是配置信息，json對象，很好理解，utils下面就是導出了幾個經常使用的方法，主要也就是用在了上述的幾個js文件裏面，另外關於生產階段和測試階段的js說明，後面會有文章說明