這里詳細說一下運行npm run build后，怎么將編譯好的文件發布到服務器上呢？眾所周知，vue build完成后，會在工程目錄下生成一個dist目錄，實際上我們只需要將dist目錄下面的index.html交給后端服務代理，static里面的靜態文件發布到靜態資源服務器上即可,dist樹結構如下；
├── index.html
└── static
├── css
│ ├── app.
1549d2a6d5d5e199f373e0595e6b3c3e
.css
│ └── app.
1549d2a6d5d5e199f373e0595e6b3c3e
.css.
map
├── fonts
│ ├── ionicons.
143146f
.woff2
│ ├── ionicons.
99ac330
.woff
│ └── ionicons.d535a25.ttf
├── img
│ └── ionicons.a2c4a26.svg
└── js
├── app.
160982c1a7364b1e533c
.js
├── app.
160982c1a7364b1e533c
.js.
map
├── vendor.
27620a775d37ccac953c
.js
└── vendor.
27620a775d37ccac953c
.js.
map
|
發布分為兩步，首先要先發布至測試環境，然后發布至線上環境，也就是說，需要分別build兩次，我們的dist目錄下生成的文件將會是完全不同的兩種，既然前后端已經分離了，每次前端代碼更新需要發布就不要讓后端也跟着忙活了，但是static目錄下的文件名是變化的，如何讓后端的index.html能夠動態獲取到static里面的文件路徑呢？我們需要在vue里安裝assets-webpack-plugin插件，將生成的資源的路徑輸出到webpack-assets.json文件，發布時將webpack-assets.json文件也一並上傳至靜態資源服務器上，后端請求http://websrc.corp.11bee.com/${job_name}/beta/webpack-assets.json 獲取里面的地址,然后渲染到index.html文件的相應位置上，文件內容如下；
{
"manifest"
: {
},
"vendor"
: {
},
"app"
: {
"css"
:
"http://websrc.corp.11bee.com/shepherd_web/beta/static/css/app.1549d2a6d5d5e199f373e0595e6b3c3e.css"
},
"": {
}
}
|
如何生成webpack-assets.json文件
安裝assets-webpack-plugin
npm install assets
-
webpack
-
plugin
-
-
save
-
dev
|
為了讓測試和生產環境生成不同的webpack-assets.json文件，需要創建一個webpack.beta.conf.js文件
cd build
cp webpack.prod.conf.js webpack.beta.conf.js
編輯測試環境的webpack.beta.conf.js
在path下面添加兩行
const path
=
require(
'path'
)
var AssetsPlugin
=
require(
'assets-webpack-plugin'
)
var assetsPluginInstance
=
new AssetsPlugin({path: path.join(__dirname,
'../prod'
),prettyPrint: true})
/
/
會自動在工程目錄下生成一個prod目錄,webpack
-
assets.json會放在prod目錄下;
...
module: {
rules: utils.styleLoaders({
...
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename:
...
publicPath:
"http://websrc.corp.11bee.com/shepherd_web/beta/"
/
/
添加這行,webpack
-
assets.json文件里的路徑會自動帶上這個地址；
},
plugins: [
assetsPluginInstance ,
/
/
添加這行
}),
...
]
}
|
編輯線上環境的webpack.prod.conf.js
在path下面添加兩行
const path
=
require(
'path'
)
var AssetsPlugin
=
require(
'assets-webpack-plugin'
)
var assetsPluginInstance
=
new AssetsPlugin({path: path.join(__dirname,
'../prod'
),prettyPrint: true})
/
/
會自動在工程目錄下生成一個prod目錄,webpack
-
assets.json會放在prod目錄下;
...
module: {
rules: utils.styleLoaders({
...
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename:
...
publicPath:
"http://websrc.corp.11bee.com/shepherd_web/prod/"
/
/
添加這行,webpack
-
assets.json文件里的路徑會自動帶上這個地址；
},
plugins: [
assetsPluginInstance ,
/
/
添加這行
}),
...
]
}
|
此時再次執行npm run build_beta 或 npm run build_prod時就會自動生成webpack-assets.json文件了；
新的vue項目需要在靜態資源服務器上配置rsync模塊
模塊的命名規則為
${job_name}_json_[beta,prod]
#該模塊用於上傳測試和生產環境的webpack-assets.json文件
${job_name}_static_[beta,prod]
#該模塊可用於上傳測試和生產環境下static目錄下的靜態文件
|
靜態資源服務器
l-websrc[1-2].ops.p1