这里详细说一下运行npm run build后，怎么将编译好的文件发布到服务器上呢？众所周知，vue build完成后，会在工程目录下生成一个dist目录，实际上我们只需要将dist目录下面的index.html交给后端服务代理，static里面的静态文件发布到静态资源服务器上即可,dist树结构如下；
└── static
├── css
│ ├── app.1549d2a6d5d5e199f373e0595e6b3c3e.css
│ └── app.1549d2a6d5d5e199f373e0595e6b3c3e.css.map
├── fonts
│ ├── ionicons.143146f.woff2
│ ├── ionicons.99ac330.woff
├── img
└── 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": {
},
"": {
}
}
|
如何生成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: {
...
})
},
output: {
filename:
...
},
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: {
...
})
},
output: {
filename:
...
},
plugins: [
assetsPluginInstance , // 添加这行
}),
...
]
}
|
此时再次执行npm run build_beta 或 npm run build_prod时就会自动生成webpack-assets.json文件了；
新的vue项目需要在静态资源服务器上配置rsync模块
模块的命名规则为
${job_name}_json_[beta,prod]
${job_name}_static_[beta,prod]
|
静态资源服务器
l-websrc[1-2].ops.p1
