當我們需要和后臺分離部署的時候，必須配置config/index.js:

用vue-cli 自動構建的目錄里面 ?（環境變量及其基本變量的配置）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var?path = require('path') module.exports = { ??build: { ????index: path.resolve(__dirname,?'dist/index.html'), ????assetsRoot: path.resolve(__dirname,?'dist'), ????assetsSubDirectory:?'static', ????assetsPublicPath:?'/', ????productionSourceMap:?true ??}, ??dev: { ????port: 8080, ????proxyTable: {} ??} }

　　

在'build'部分，我們有以下選項：

build.index

必須是本地文件系統上的絕對路徑。

index.html?(帶著插入的資源路徑) 會被生成。

如果你在后臺框架中使用此模板，你可以編輯index.html路徑指定到你的后臺程序生成的文件。例如Rails程序，可以是app/views/layouts/application.html.erb，或者Laravel程序，可以是resources/views/index.blade.php。

build.assetsRoot

必須是本地文件系統上的絕對路徑。

應該指向包含應用程序的所有靜態資產的根目錄。public/?對應Rails/Laravel。

build.assetsSubDirectory

被webpack編譯處理過的資源文件都會在這個build.assetsRoot目錄下，所以它不可以混有其它可能在build.assetsRoot里面有的文件。例如，假如build.assetsRoot參數是/path/to/dist，build.assetsSubDirectory?參數是?static, 那么所以webpack資源會被編譯到path/to/dist/static目錄。

每次編譯前，這個目錄會被清空，所以這個只能放編譯出來的資源文件。

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配置的理解

1 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 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

//引入依賴模塊 var?path = require('path') var?config = require('../config')?// 獲取配置 var?utils = require('./utils') var?projectRoot = path.resolve(__dirname,?'../') var?env = process.env.NODE_ENV // check env & config/index.js to decide weither to enable CSS Sourcemaps for the // various preprocessor loaders added to vue-loader at the end of this file var?cssSourceMapDev = (env ===?'development'?&& config.dev.cssSourceMap)/* 是否在 dev 環境下開啟 cssSourceMap ，在 config/index.js 中可配置 */ var?cssSourceMapProd = (env ===?'production'?&& config.build.productionSourceMap)/* 是否在 production 環境下開啟 cssSourceMap ，在 config/index.js 中可配置 */ var?useCssSourceMap = cssSourceMapDev || cssSourceMapProd?/* 最終是否使用 cssSourceMap */ module.exports = { ??entry: {???// 配置webpack編譯入口 ????app:?'./src/main.js'? ??}, ??output: {????// 配置webpack輸出路徑和命名規則 ????path: config.build.assetsRoot,?// webpack輸出的目標文件夾路徑（例如：/dist） ????publicPath: process.env.NODE_ENV ===?'production'?? config.build.assetsPublicPath : config.dev.assetsPublicPath,??// webpack編譯輸出的發布路徑(判斷是正式環境或者開發環境等) ????filename:?'[name].js'???// webpack輸出bundle文件命名格式，基于文件的md5生成Hash名稱的script來防止緩存 ??}, ??resolve: { ????extensions: ['',?'.js',?'.vue',?'.scss'],??//自動解析確定的拓展名,使導入模塊時不帶拓展名 ????fallback: [path.join(__dirname,?'../node_modules')], ????alias: {??// 創建import或require的別名，一些常用的，路徑長的都可以用別名 ??????'vue$':?'vue/dist/vue', ??????'src': path.resolve(__dirname,?'../src'), ??????'assets': path.resolve(__dirname,?'../src/assets'), ??????'components': path.resolve(__dirname,?'../src/components'), ??????'scss_vars': path.resolve(__dirname,?'../src/styles/vars.scss') ????} ??}, ??resolveLoader: { ????fallback: [path.join(__dirname,?'../node_modules')] ??}, ??module: { ????loaders: [ ????????{ ????????????test: /\.vue$/,?// vue文件后綴 ????????????loader:?'vue'???//使用vue-loader處理 ????????}, ????????{ ????????????test: /\.js$/, ????????????loader:?'babel', ????????????include: projectRoot, ????????????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]') ????????????} ????????} ????] ??}, ??vue: {????// .vue 文件配置 loader 及工具 (autoprefixer) ????loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),? 調用cssLoaders方法返回各類型的樣式對象(css: loader) ????postcss: [ ??????require('autoprefixer')({ ????????browsers: ['last 2 versions'] ??????}) ????] ??} }

　　webpack.prod.conf.js 生產環境下的配置文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

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頁面

1 // 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 文件可以看出

1 2 3 4 5

"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 ?便可實現代碼的實時編譯

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue中config/index.js:配置的详细理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。