當咱們須要和後臺分離部署的時候,必須配置config/index.js:php
用vue-cli 自動構建的目錄裏面 (環境變量及其基本變量的配置)css
1 var path = require('path') 2 3 module.exports = { 4 build: { 5 index: path.resolve(__dirname, 'dist/index.html'), 6 assetsRoot: path.resolve(__dirname, 'dist'), 7 assetsSubDirectory: 'static', 8 assetsPublicPath: '/', 9 productionSourceMap: true 10 }, 11 dev: { 12 port: 8080, 13 proxyTable: {} 14 } 15 }
在'build'部分,咱們有如下選項:html
build.index
必須是本地文件系統上的絕對路徑。vue
index.html
(帶着插入的資源路徑) 會被生成。node
若是你在後臺框架中使用此模板,你能夠編輯index.html
路徑指定到你的後臺程序生成的文件。例如Rails程序,能夠是app/views/layouts/application.html.erb
,或者Laravel程序,能夠是resources/views/index.blade.php
。webpack
build.assetsRoot
必須是本地文件系統上的絕對路徑。git
應該指向包含應用程序的全部靜態資產的根目錄。public/
對應Rails/Laravel。github
build.assetsSubDirectory
被webpack編譯處理過的資源文件都會在這個build.assetsRoot
目錄下,因此它不能夠混有其它可能在build.assetsRoot
裏面有的文件。例如,假如build.assetsRoot
參數是/path/to/dist
,build.assetsSubDirectory
參數是 static
, 那麼因此webpack資源會被編譯到path/to/dist/static
目錄。web
每次編譯前,這個目錄會被清空,因此這個只能放編譯出來的資源文件。vue-cli
static/
目錄的文件會直接被在構建過程當中,直接拷貝到這個目錄。這意味着是若是你改變這個規則,全部你依賴於static/
中文件的絕對地址,都須要改變。
build.assetsPublicPath【資源的根目錄】
這個是經過http服務器運行的url路徑。在大多數狀況下,這個是根目錄(/
)。若是你的後臺框架對靜態資源url前綴要求,你僅須要改變這個參數。在內部,這個是被webpack當作output.publicPath
來處理的。
後臺有要求的話通常要加上./ 或者根據具體目錄添加,否則引用不到靜態資源
build.productionSourceMap
在構建生產環境版本時是否開啓source map。
dev.port
開發服務器監聽的特定端口
dev.proxyTable
定義開發服務器的代理規則。
項目中配置的config/index.js,有dev和production兩種環境的配置 如下介紹的是production環境下的webpack配置的理解
var path = require('path') 2 3 module.exports = { 4 build: { // production 環境 5 env: require('./prod.env'), // 使用 config/prod.env.js 中定義的編譯環境 6 index: path.resolve(__dirname, '../dist/index.html'), // 編譯輸入的 index.html 文件 7 assetsRoot: path.resolve(__dirname, '../dist'), // 編譯輸出的靜態資源路徑 8 assetsSubDirectory: 'static', // 編譯輸出的二級目錄 9 assetsPublicPath: '/', // 編譯發佈的根目錄,可配置爲資源服務器域名或 CDN 域名 10 productionSourceMap: true, // 是否開啓 cssSourceMap 11 // Gzip off by default as many popular static hosts such as 12 // Surge or Netlify already gzip all static assets for you. 13 // Before setting to `true`, make sure to: 14 // npm install --save-dev compression-webpack-plugin 15 productionGzip: false, // 是否開啓 gzip 16 productionGzipExtensions: ['js', 'css'] // 須要使用 gzip 壓縮的文件擴展名 17 }, 18 dev: { // dev 環境 19 env: require('./dev.env'), // 使用 config/dev.env.js 中定義的編譯環境 20 port: 8080, // 運行測試頁面的端口 21 assetsSubDirectory: 'static', // 編譯輸出的二級目錄 22 assetsPublicPath: '/', // 編譯發佈的根目錄,可配置爲資源服務器域名或 CDN 域名 23 proxyTable: {}, // 須要 proxyTable 代理的接口(可跨域) 24 // CSS Sourcemaps off by default because relative paths are "buggy" 25 // with this option, according to the CSS-Loader README 26 // (https://github.com/webpack/css-loader#sourcemaps) 27 // In our experience, they generally work as expected, 28 // just be aware of this issue when enabling this option. 29 cssSourceMap: false // 是否開啓 cssSourceMap 30 } 31 }
下面是vue中的build/webpack.base.conf.js
1 //引入依賴模塊 2 var path = require('path') 3 var config = require('../config') // 獲取配置 4 var utils = require('./utils') 5 var projectRoot = path.resolve(__dirname, '../') 6 7 var env = process.env.NODE_ENV 8 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the 9 // various preprocessor loaders added to vue-loader at the end of this file 10 var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)/* 是否在 dev 環境下開啓 cssSourceMap ,在 config/index.js 中可配置 */ 11 var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)/* 是否在 production 環境下開啓 cssSourceMap ,在 config/index.js 中可配置 */ 12 var useCssSourceMap = cssSourceMapDev || cssSourceMapProd /* 最終是否使用 cssSourceMap */ 13 14 module.exports = { 15 entry: { // 配置webpack編譯入口 16 app: './src/main.js' 17 }, 18 output: { // 配置webpack輸出路徑和命名規則 19 path: config.build.assetsRoot, // webpack輸出的目標文件夾路徑(例如:/dist) 20 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, // webpack編譯輸出的發佈路徑(判斷是正式環境或者開發環境等) 21 filename: '[name].js' // webpack輸出bundle文件命名格式,基於文件的md5生成Hash名稱的script來防止緩存 22 }, 23 resolve: { 24 extensions: ['', '.js', '.vue', '.scss'], //自動解析肯定的拓展名,使導入模塊時不帶拓展名 25 fallback: [path.join(__dirname, '../node_modules')], 26 alias: { // 建立import或require的別名,一些經常使用的,路徑長的均可以用別名 27 'vue$': 'vue/dist/vue', 28 'src': path.resolve(__dirname, '../src'), 29 'assets': path.resolve(__dirname, '../src/assets'), 30 'components': path.resolve(__dirname, '../src/components'), 31 'scss_vars': path.resolve(__dirname, '../src/styles/vars.scss') 32 } 33 }, 34 resolveLoader: { 35 fallback: [path.join(__dirname, '../node_modules')] 36 }, 37 module: { 38 loaders: [ 39 { 40 test: /\.vue$/, // vue文件後綴 41 loader: 'vue' //使用vue-loader處理 42 }, 43 { 44 test: /\.js$/, 45 loader: 'babel', 46 include: projectRoot, 47 exclude: /node_modules/ 48 }, 49 { 50 test: /\.json$/, 51 loader: 'json' 52 }, 53 { 54 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 55 loader: 'url', 56 query: { 57 limit: 10000, 58 name: utils.assetsPath('img/[name].[hash:7].[ext]') 59 } 60 }, 61 { 62 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 63 loader: 'url', 64 query: { 65 limit: 10000, 66 name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 67 } 68 } 69 ] 70 }, 71 vue: { // .vue 文件配置 loader 及工具 (autoprefixer) 72 loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), //// 調用cssLoaders方法返回各種型的樣式對象(css: loader) 73 postcss: [ 74 require('autoprefixer')({ 75 browsers: ['last 2 versions'] 76 }) 77 ] 78 } 79 }
webpack.prod.conf.js 生產環境下的配置文件
var path = require('path') var config = require('../config') var utils = require('./utils') var webpack = require('webpack') var merge = require('webpack-merge')// 一個能夠合併數組和對象的插件 var baseWebpackConfig = require('./webpack.base.conf') // 用於從webpack生成的bundle中提取文本到特定文件中的插件 // 能夠抽取出css,js文件將其與webpack輸出的bundle分離 var ExtractTextPlugin = require('extract-text-webpack-plugin') //若是咱們想用webpack打包成一個文件,css js分離開,須要這個插件 var HtmlWebpackPlugin = require('html-webpack-plugin')// 一個用於生成HTML文件並自動注入依賴文件(link/script)的webpack插件 var env = config.build.env // 合併基礎的webpack配置 var webpackConfig = merge(baseWebpackConfig, { // 配置樣式文件的處理規則,使用styleLoaders module: { loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, // 開啓source-map,生產環境下推薦使用cheap-source-map或source-map,後者獲得的.map文件體積比較大,可是可以徹底還原之前的js代碼 output: { path: config.build.assetsRoot,// 編譯輸出目錄 filename: utils.assetsPath('js/[name].[chunkhash].js'), // 編譯輸出文件名格式 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') // 沒有指定輸出名的文件輸出的文件名格式 }, vue: { // vue裏的css也要單獨提取出來 loaders: utils.cssLoaders({ // css加載器,調用了utils文件中的cssLoaders方法,用來返回針對各種型的樣式文件的處理方式, sourceMap: config.build.productionSourceMap, extract: true }) }, // 從新配置插件項 plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html // 位於開發環境下 new webpack.DefinePlugin({ 'process.env': env }), new webpack.optimize.UglifyJsPlugin({// 醜化壓縮代碼 compress: { warnings: false } }), new webpack.optimize.OccurenceOrderPlugin(), // extract css into its own file new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), // 抽離css文件 // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin // filename 生成網頁的HTML名字,可使用/來控制文件文件的目錄結構,最 // 終生成的路徑是基於webpac配置的output.path的 new HtmlWebpackPlugin({ // 生成html文件的名字,路徑和生產環境下的不一樣,要與修改後的publickPath相結合,不然開啓服務器後頁面空白 filename: config.build.index, // 源文件,路徑相對於本文件所在的位置 template: 'index.html', inject: true,// 要把
vue 中build/build.js頁面
// https://github.com/shelljs/shelljs 2 require('./check-versions')() // 檢查 Node 和 npm 版本 3 require('shelljs/global') // 使用了 shelljs 插件,可讓咱們在 node 環境的 js 中使用 shell 4 env.NODE_ENV = 'production' 5 6 var path = require('path') 7 var config = require('../config') // 加載 config.js 8 var ora = require('ora') // 一個很好看的 loading 插件 9 var webpack = require('webpack') // 加載 webpack 10 var webpackConfig = require('./webpack.prod.conf') // 加載 webpack.prod.conf 11 12 console.log( // 輸出提示信息 ~ 提示用戶請在 http 服務下查看本頁面,不然爲空白頁 13 ' Tip:\n' + 14 ' Built files are meant to be served over an HTTP server.\n' + 15 ' Opening index.html over file:// won\'t work.\n' 16 ) 17 18 var spinner = ora('building for production...') // 使用 ora 打印出 loading + log 19 spinner.start() // 開始 loading 動畫 20 21 /* 拼接編譯輸出文件路徑 */ 22 var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 23 rm('-rf', assetsPath) /* 刪除這個文件夾 (遞歸刪除) */ 24 mkdir('-p', assetsPath) /* 建立此文件夾 */ 25 cp('-R', 'static/*', assetsPath) /* 複製 static 文件夾到咱們的編譯輸出目錄 */ 26 27 webpack(webpackConfig, function (err, stats) { // 開始 webpack 的編譯 28 // 編譯成功的回調函數 29 spinner.stop() 30 if (err) throw err 31 process.stdout.write(stats.toString({ 32 colors: true, 33 modules: false, 34 children: false, 35 chunks: false, 36 chunkModules: false 37 }) + '\n') 38 })
項目入口,由package.json 文件能夠看出
"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js", "watch": "node build/build-watch.js" },
當咱們執行 npm run dev / npm run build / npm run watch時運行的是 node build/dev-server.js 或 node build/build.js 或node build/build-watch.js
node build/build-watch.js 是我配置的載production環境的配置基礎上在webpack的配置模塊加上 watch:true 即可實現代碼的實時編譯