㈠ webpack打包後的代碼，如何部署到伺服器上
本文章前端代碼是基於vue+webpack開發的
Nginx是一款輕量級的Web 伺服器/反向代理伺服器
首先，webpack配置如下
在開發過程中，我們是通過npm run dev在開發環境中運行代碼
如果要部署到生產環境中，可以運行npm run build進行上線打包
打包完成後，會發現項目中多了dist這個文件夾
執行結果和webpack的配置文件一致。
代碼被webpack打包完成後下一步就是部署到伺服器上，此文僅適合於前端代碼是部署在windows操作系統的nginx服務中。
這里假設：
Windows操作系統：windows server 2008 64位
Nginx服務：nginx-1.12.2 64位
1.下載nginx-1.12.2 64位解壓，假設nginx-1.12.2放在D:nginx-1.12.2目錄中，nginx目錄結構。如圖下
2、前端代碼放在D:nginx-1.12.2html目錄中，dist目錄就是剛剛前端打包完的代碼。如圖下
3、在D:nginx-1.12.2conf目錄中，有個nginx.conf配置文件，進行編輯這個文件
4、假設前端的埠號為8082，如果埠號被佔用，請修改為其它埠號。後台服務訪問地址http://192.168.121.**:8080,
5、打開cmd控制台，進入目錄D:nginx-1.12.2中，用start nginx命令啟動服務，然後用tasklist /fi "imagename eq nginx.exe"，查看nginx服務是否啟動。
4、如果改變配置文件時，需要用nginx -s reload 命令重啟nginx工作進程。
5、關閉服務
nginx -s stop
nginx -s quit 安全關閉
taskkill /F /IM nginx.exe > nul 關閉所有nginx服務
㈡ gulp 怎麼生存dist文件夾
文件合並：關於文件合並很多人存在這樣的疑惑，在前端開發中到底該把所有js和css寫在一個文件里還是各個頁面分開寫，我的建議是開發的時候分開寫，上線的時候合並為一個，這樣的好處是對於瀏覽器來說，不同頁面中相同的文件默認會請求一次緩存下來，其他頁面請求相同文件時就直接從緩存中讀取，減少文件的網路請求可以提高網頁速度，所以文件合並的是很有必要的。
2.文件壓縮：既然都合並了，何不再壓縮一下呢
3.語法檢查：這個功能一般會和下面第4條功能配合使用，當文件修改的時候檢查是否有語法錯誤，並在命令行中輸出錯誤信息。
4.監聽文件變化：監聽某個目錄下文件是否修改，修改的話就執行特定的操作，比如上面幾個操作。
以上4點是比較常用的功能，更多功能根據自己需要添加
var gulp = require('gulp');
var jshint = require('gulp-jshint');//語法檢查
var concat = require('gulp-concat');//合並文件
var uglify = require('gulp-uglify');//壓縮代碼
var rename = require('gulp-rename');//重命名
// 語法檢查
gulp.task('jshint', function () {
return gulp.src('public/javascripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合並文件之後壓縮代碼
gulp.task('minify', function (){
return gulp.src('public/javascripts/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('public/javascripts/dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('public/javascripts/dist'));
});
// 監視文件的變化
gulp.task('watch', function () {
gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);
});
// 注冊預設任務
gulp.task('default', ['jshint', 'minify', 'watch']);
// gulp.task('default', ['jshint', 'minify']);
㈢ webpack生成的dist怎麼運行
幾乎所有業務的開發構建都會用到 webpack 。的確，作為模塊載入和打包神器，只需配置幾個文件，載入各種 loader 就可以享受無痛流程化開發。但對於 webpack 這樣一個復雜度較高的插件集合，它的整體流程及思想對我們來說還是很透明的。
㈣ vue-cli + webpack 打包後的dist文件怎麼在伺服器中運行
使用nginx，借鑒網頁鏈接
㈤ vuejs怎麼在伺服器部署
既然是布署，哪默認就應該是生產環境下的布署，vue開發的應用本質上就是靜態文件,無論你用何種web伺服器，放上去就應該能通過http訪問
接下來我來幫大家來捋一捋
首先VUE 是一個javascript的前端框架，註定了它是運行在瀏覽器里的，對伺服器本地沒有任何要求，只要一個靜態文件伺服器能通過http訪問到其資源文件就足矣！無論你是用apache ,ngnix 就算你要用node 自己實現一個靜態文件伺服器，也用不了多少行代碼。
npm run dev 是用來在本地開發的時候做調試用的，vue開發的是前端的東西，不是nodejs 服務端程序，按道理講，生產環境里就不該存在npm，甚至nodejs也不需要（用nodejs來做web靜態服務的除外），樓主通過ssh進入到伺服器里，再運行npm run dev 來啟動哪是開發機上做的事情。正確的做法很簡單，通過npm run build 把生成的dist文件夾（不要上傳文件夾）里的內容上傳到http伺服器上就可以通過 http來訪問了，開發機上正常，上傳以後 程序出現錯誤不能運行的原因99.99%的可能性是你引用資源的路徑有問題。
一般如果vue框架的程序上傳到網站伺服器的根目錄下是不 會有問題的，也不存在資源文件引用錯誤的情況，但如果你不是根目錄，就會有問題，通過vue-cli 生成的開發目錄，build以後默認引用資源文件的路徑是
有更多疑問 」可以咨詢 」小鳥雲，它是的一家伺服器廠商，我一直在用他們產品！
㈥ dist文件可以用什麼看
dist文件可以用jquery看。
又是一個上當受騙者，我曾經用過，根本沒有辦法的，它讓你下JAVA還有C++語言庫，最後還讓你把數據手動添加到JAVA里，根本就不會，即使會也非常麻煩，我還用過好多模擬器，都不行的，PSP本來就不好賣，再有了模擬器，那索尼還活不活了。
數據封裝和數據隱藏：
在C++中，類是支持數據封裝的工具，對象則是數據封裝的實現。C++通過建立用戶定義類支持數據封裝和數據隱藏。
在面向對象的程序設計中，將數據和對該數據進行合法操作的函數封裝在一起作為一個類的定義。對象被說明為具有一個給定類的變數。每個給定類的對象包含這個類所規定的若干私有成員、公有成員及保護成員。
完好定義的類一旦建立，就可看成完全封裝的實體，可以作為一個整體單元使用。類的實際內部工作隱藏起來，使用完好定義的類的用戶不需要知道類的工作原理，只要知道如何使用它即可。
㈦ vue里 npm run build後應該怎麼運行
1. 前言
vue-cli 一個簡單的構建Vue.js項目的命令行界面
整體過程：
$ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev
後面分步說明。
2. 安裝
前提條件，Node.js >=4.x版本，建議使用6.x版本。npm版本 > 3.x
全局安裝vue-cli
$ npm install -g vue-cli
㈧ rap2在linux下前端和後台服務如何啟動可以讓服務進程在後台運行
我是按github的文檔搭建的，後端用使用pm2管理
npm run dev 是測試用的 就是看你配置文件有沒有配對 會不會報錯。
沒問題的話 就把配置寫到 src/config.prod.ts里，然後用 npm run build 構建一下 會生成一個dist文件夾，然後在應用根目錄運行 npm start 命令 就啟動了
pm2 list 可以查看啟動的應用，pm2 的命令自己搜一下 挺多的
前端，npm run build 會生成一個 build 文件夾 把 build下面的內容拷貝到 nginx 下就可以了
㈨ 前後端分離的前端是怎麼部署到生產環境中的，直接通過 nginx 嗎
front-end-separate(前後端分離腳手架)
front-end-separate
一個前後端分離的腳手架工具（自主研發）
為什麼選擇grunt而不是gulp
如果你也和我一樣喜歡grunt這種配置的方式，那麼我相信這個腳手架覺對十分適合你
所有靜態資源都md5全並壓縮打包,css,js,img,html
已在生產環境驗證
基於express和grunt的前後端分離框架
模板引擎使用的是nunjucks，好處是可以實現模版繼承，又不像jade一樣把html標簽都簡化了
express提供路由服務
項目中app為原代碼文件（開發用），dist為打包後的文件（用於線上）
開發使用app，線上使用dist，支持一鍵cdn部署，加速你的項目
項目啟動時，修改任何express代碼，可以實現自動重啟–基於nodemon
支持sass圖片精靈（自動打包精靈圖片，再也不用手動去拼湊了）
基於grunt md5 打包合並
線上輸出的html已經壓縮成一行（讓你的代碼更有Geeker范）
㈩ 如何解決webpack打包後，dist文件過大的問題
去除不必要的插件
剛開始用 webpack 的時候，開發環境和生產環境用的是同一個 webpack 配置文件，導致生產環境打包的 JS 文件包含了一大堆沒必要的插件，比如 HotMoleReplacementPlugin, NoErrorsPlugin... 這時候不管用什麼優化方式，都沒多大效果。所以，如果你打包後的文件非常大的話，先檢查下是不是包含了這些插件。
提取第三方庫
像 react 這個庫的核心代碼就有 627 KB，這樣和我們的源代碼放在一起打包，體積肯定會很大。所以可以在 webpack 中設置
{
entry: {
bundle: 'app'
vendor: ['react']
}
plugins: {
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
}
}
這樣打包之後就會多出一個 vendor.js 文件，之後在引入我們自己的代碼之前，都要先引入這個文件。比如在 index.html 中
<script src="/build/vendor.js"></script>
<script src="/build/bundle.js"></script>
除了這種方式之外，還可以通過引用外部文件的方式引入第三方庫，比如像下面的配置
{
externals: {
'react': 'React'
}
}
externals 對象的 key 是給 require 時用的，比如 require('react')，對象的 value 表示的是如何在 global 中訪問到該對象，這里是 window.React。這時候 index.html 就變成下面這樣
<script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>
<script src="/build/bundle.js"></script>
當然，個人更推薦第一種方式。
代碼壓縮
webpack 自帶了一個壓縮插件 UglifyJsPlugin，只需要在配置文件中引入即可。
{
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
加入了這個插件之後，編譯的速度會明顯變慢，所以一般只在生產環境啟用。
另外，伺服器端還可以開啟 gzip 壓縮，優化的效果更明顯。
代碼分割
什麼是代碼分割呢？我們知道，一般載入一個網頁都會把全部的 js 代碼都載入下來。但是對於 web app 來說，我們更想要的是只載入當前 UI 的代碼，沒有點擊的部分不載入。
看起來好像挺麻煩，但是通過 webpack 的 code split 以及配合 react router 就可以方便實現。具體的例子可以看下 react router 的官方示例 huge apps。不過這里還是講下之前配置踩過的坑。
code split 是不支持 ES6 的模塊系統的，所以在導入和導出的時候千萬要注意，特別是導出。如果你導出組件的時候用 ES6 的方式，這時候不管導入是用 CommomJs 還是 AMD，都會失敗，而且還不會報錯！
當然會踩到這個坑也是因為我剛剛才用 NodeJS，而且一入門就是用 ES6 的風格。除了這個之外，還有一點也要注意，在生產環境的 webpack 配置文件中，要加上 publicPath
output: {
path: xxx,
publicPath: yyy,
filename: 'bundle.js'
}
不然的話，webpack 在載入 chunk 的時候，路徑會出錯。
設置緩存
開始這個小節之前，可以先看下大神的一篇文章：大公司里怎樣開發和部署前端代碼。
對於靜態文件，第一次獲取之後，文件內容沒改變的話，瀏覽器直接讀取緩存文件即可。那如果緩存設置過長，文件要更新怎麼辦呢？嗯，以文件內容的 MD5 作為文件名就是一個不錯的解決方案。來看下用 webpack 應該怎樣實現
output: {
path: xxx,
publicPath: yyy,
filename: '[name]-[chunkhash:6].js'
}
打包後的文件名加入了 hash 值
const bundler = webpack(config)
bundler.run((err, stats) => {
let assets = stats.toJson().assets
let name
for (let i = 0; i < assets.length; i++) {
if (assets[i].name.startsWith('main')) {
name = assets[i].name
break
}
}
fs.stat(config.buildTemplatePath, (err, stats) => {
if (err) {
fs.mkdirSync(config.buildTemplatePath)
}
writeTemplate(name)
})
})
手動調用 webpack 的 API，獲取打包後的文件名，通過 writeTemplate 更新 html 代碼。完整代碼猛戳 gitst。