注:不建议部署在 tomcat 上,建议部署在 Nginx,参考: vue项目打包并部署到 Nginx
一、打包Vue项目
前期准备
为避免部署后出现无法访问和页面空白等问题,需要修改三处的内容,文件位置如下:
- 在 /build/untils.js 添加
publicPath: '../../'
,添加后如下:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
- 在 /build/webpack.prod.conf.js 添加
publicPath: './'
,添加后如下:
output: {
path: config.build.assetsRoot,
publicPath: './',
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
- 修改 /config/index.js 中
assetsPublicPath: '/'
为assetsPublicPath: './'
,修改后如下:
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
}
项目打包
终端输入npm run build
,成功后会在项目中看到打包好的项目在dist文件夹中。
二、部署到tomcat服务器
运行环境
- 阿里云ECS
- Ubuntu 系统
- Docker容器化
注: 默认已经通过Docker下载好tomcat镜像
部署过程
- 运行 tomcat 容器(如果下载的特定版本需加版本号):
docker run --name my-tomcat -p 8080:8080 tomcat
注: Docker 下tomcat容器 /webapps文件夹下为空,因此这时去浏览器访问 “ip:8080/” 是无法访问到任何内容的。 - 进入容器,并在 /webapps下新建文件夹 xxx(因为将打包好的文件直接放到webapps下是无法访问的)
进入容器命令:deocekr exec -it 容器名 bash
- 将打包好的文件(/dist 文件 index.html 和static文件夹)放到tomcat容器 /webapps/xxx/ 下
涉及的命令:
①.docker cp 宿主机中文件路径及容器文件名 容器名:要拷贝到容器里面对应的路径
- 在浏览器访问:
http://ip:8080/xxx/
Email : Beyonderwei@Gmail.com
Website : http://beyonderwei.com
WeChat: