A. vue打包後生成可配置文件，用於修改介面路徑等
vue打包發布後，如果介面地址等發生變更，需要重新打包，過於繁瑣。因此需要將一些例如介面地址、網站參數等拿出來動態配置。
具體步驟如下：
1、安裝generate-asset-webpack-plugin插件
npm install generate-asset-webpack-plugin --save-dev
2、在vue.config.js中配置如下：
3、使用
在main.js中全局引入
4、打包後dist下生成.json文件，修改介面後生效
如果你有更好的方法也請留言哦。。。
B. vue2.0用腳手架搭建的官方例子怎麼用webpack打包 如何配置
前言 vue2 然後通過以下命令安裝 webpack cnpm install webpack -g 註：下面 orange 默認給出 npm 的安裝方案，安裝失敗請自行轉為 cnpm 安裝 在需要創建工程的位置運行 vue init webpack-simple 工程名字<工程名字不能用中文> 或者創建 vue1.0 的項目，只需將命令換成 vue init webpack-simple#1.0 這里我們基於 2.x 開發的，直接使用第一種方法創建工程即可，下圖是創建工程時的截圖，需要你添加 Project name，Project description，Author. 圖中已經給出下一步應該操作的步驟，我們按照步驟一步一步執行，這里 orange 不給大家一步一步列出。 注意：這里一定要使用 npm install 安裝官方庫，而不要使用淘寶鏡像，會導致部分依賴丟失。 安裝完成後，目錄如下圖。 然後我們運行我們的項目後瀏覽器會自動彈出，並展示以下頁面 這里注意觀察，默認給我們八個鏈接，可以根據這幾個鏈接獲得我們想要的學習資源，上面是必要的的鏈接（官方文檔以及關注 vue 動態），下面是 vue 的生態系統，大家親切的叫它們為全家桶。 二、Vue 全家桶 我們接下來介紹全家桶的安裝（使用詳情大家可以去初始頁面的鏈接查看） 一句命令搞定全家桶 npm install vue-router vue-resource vuex --save package.json 已經加入了我們的全家桶，node_moles 目錄下也有對應的依賴包，注意這里現在還不能用擴展之後的方法，因為我們沒引入到項目中來。 src/main.js 修改如下 import Vue from 'vue' import VueResource from 'vue-resource' import VueRouter from 'vue-router' import Vuex from 'vuex' import App from './App.vue' Vue.use(VueResource) Vue.use(VueRouter) Vue.use(Vuex) new Vue({ el: '#app', render: h => h(App) }) 這時我們的項目就能運行對應的擴展方法了 三、集成 Sass 作為移動端的開發怎麼能缺少 css 預編譯語言。sass 安裝需要幾個依賴。 我們乾脆在 package.json 把版本寫死，然後通過 npm install 安裝 在 "devDependencies": {} 中添加下面幾個依賴 "node-sass": "^3.8.0", "sass": "^0.5.0", "sass-loader": "^4.0.0", 好，我們 npm install 後，就可以正式使用 sass 啦 四、目錄結構建議 依賴的安裝到這里差不多結束了，其它大家需要的可以自定義安裝 下面給出我的目錄建議供大家參考， 這里的 img 目錄放置圖片，script 目錄放置公共的工具函數，style 目錄放置我們的 sass 文件， 你查看 App.vue 文件時不難發現，默認的把樣式文件給到了模塊里，這樣樣式一直跟著模塊 orange 建議大家不要這樣做，因為這樣十分不利於樣式的模塊化，注意區分與模版模塊化的區別， 我們單獨設置 style 目錄，並在目錄當中對 sass 進行模塊化處理（通過 import 引入 sass 模塊） 對應的 App.vue 也變得非常簡潔，代碼如下 <style lang="sass"> @import "/style/base.scss"; </style> 五、rem 適配 對於移動端的開發，rem 適配必不可少，我們可以用多種方式實現，下面給出一種方案 在 index.html 中添加如下代碼 <script> let html = document.documentElement; window.rem = html.getBoundingClientRect().width / 16 ; html.style.fontSize = window.rem + 'px'; </script> 這里基於寬 320px 的屏幕分成了 16 份，也就是 1rem = 20px，目前大多數設計稿都是根據 iphone6 的寬（ 375px ）走的，建議大家在這里分成 25 份，也就是 1rem = 15px，計算起來方便些。 簡單說下 rem 原理：根據 html 的 fontSize 屬性值為基準，其它所有的 rem 值，根據這個基準計算。 我們根據屏幕寬度用 js 動態修改了 html 的 fontSize 屬性值，達到移動端適配的目的 總結 以上就是這篇文章的全部內容了，本文作為移動端配置的基礎篇，深入了解框架後才能繼續構建網站，希望這是一個好的開始，有了這個架子再填充代碼就方便了許多，不用再去考慮開發環境問題了。希望本文的內容對有需要的朋友們能有所幫助。
C. webpack怎樣配置出入口文件
//出口文件
mole.exports={
//入口文件
entry:」./src/index.js」//入口文件路徑
}
//出口文件配置
output:{
path:path.resolve(__dirrname,」dist」),
//打包文回件的絕對路答徑
filename:」build.js」
//打包的文件名
}
mole: {
rules: [{
test: /\.css$/, //壓縮css
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|gif|jpeg|mp4)$/,//壓縮圖片
use: 'file-loader'
}]
} （BY三人行慕課）
D. 手把手 教你一步步--搭建vue腳手架，配置webpack文件
說明：配置後項目裡面就多了package.json文件
安裝好後package.json多了一行嘩嘩webpack指令
說明：這里和往後內容使用
cnpm是因為我本地安裝淘寶鏡像，用cnpm配置安裝命令行更頃棗快
安裝好後package.json多了一行webpack-dev-server指令
說明：配置好這條指令後就可以在命令板中輸入npm run dev運行項目；在瀏覽器顯示的地址是默認的 :8080/；如果不想要默認，可以改埠為：在package.json文件的scripts改dev為："webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"
在webpack.config.js配置以下內容：入口配置和出口配置
需要特別注意：dirname前面是有兩橫（我就設置了一條橫線，導致報錯，看似小問題，可這坑不小，因為沒留意，都找不到這bug）
在index.html中設置以下內容：（需要把main.js入口文件引入index.html文件中）
輸入npm run dev運行項目，下面顯示命令行是成功調用：
調用成功後自動打開瀏覽器顯示頁面內容：埠默認為8080
在main.js文件里修改index.html文件裡面的內容，再運行項目看看瀏覽器顯示內容的變化情況：
因為配置webpack-dev-server的熱更新功能，修改後瀏覽器會自動更新修改後的內容：（說明前面的命令行配置成功）
可以按f12，在瀏覽器的調試模式里查看到websocket
說明：生成目錄dist中的main.js，這是個打包過程
已經生成dist目錄的mainjs打包文件
配置css-loader命令行
配置style-loader命令行
配置css-loader/style-loader命令行後，在webpack.config.js配置文件里配置loader，增加對.css文亂乎行件的處理
在項目目錄下新建一個style.css文件
然後在main.js入口文件裡面用import引入：
瀏覽器自動更新內容的字體樣式（啟動熱更新功能）
此時可以在瀏覽器可以看到css是通過js動態創建<style>標簽來寫入的
配置插件後在package.json中有顯示配置後的extract-text-webpack-plugin命令行
配置好插件後也需要修改webpack.config.js配置文件為以下內容：
最後在index.html中引入main.css文件（.vue為後綴的文件中的style樣式都統一打包在main.css文件中）
需要配置以下的所有命令:例如需要用到.vue文件需要先安裝vue-loader、vue-style-loader等載入器並做配置；要使用es6語法，需要安裝babel和babel-loader等載入器（注意一條都不能配置漏，不然出現報錯可能影響往後的運行與配置）：
配置好以上的命令行，package.json添加這些命令行
配置以上命令行後，在webpack.config.js配置文件中設置以下內容：
說明：vue-loader在編譯.vue文件時，會對<template>、<script>、<style>分別處理，所以在vue-loader選項里多了一項options來進一步對不同語言進行配置，如在對css處理時，會先通過css-loader解析，然後把處理結果再交給vue-style-loader處理
把app.vue引入入口文件main.js：
瀏覽器自動更新顯示：
在瀏覽器的調試模式中會看到div標簽中出現屬性data-v-xxx ，那是因為使用了<style scoped>，樣式只作用本組件中；如果去掉scoped，div標簽就沒有data-v-屬性，只是單純的普通標簽<div>文本數據</div>
然後把這兩個組件導入app.vue根組件中
配置後需要在webpack.config.js文件中配置test/loader
新建一個image文件夾放圖片
在app.vue根組件裡面加入img標簽
瀏覽器自動更新顯示
配置後在目錄新建webpack.prod.config.js生產環境的配置文件（該文件在基本配置文件的基礎上擴展）
配置打包依賴後在package.json文件里加入build的快捷腳本打包
補充說明：ejs是一個javascript模板庫，用來從json數據中生成html字元串，常用於node.js
npm run build 打包後的靜態資源main.css/main.js/jpg（css文件，js文件，圖片）
附上github（配置後的項目demo）：
https://www.jianshu.com/u/3908e601f4ec
。。。終於完結，感覺碼了好久（感謝大家閱讀完到這里），以上的內容有不對或者不好地方，歡迎指出，往後還會更新有關vue-router和vuex的文章，希望分享的文章對大家有幫助！