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

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

123456789101112131415

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

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879

//引入依賴模塊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 filevar?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 生產環境下的配置文件

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455

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

12345

"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文件配置的全部內容，希望文章能夠幫你解決所遇到的問題。

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