这里详细说一下运行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