文章目录
注:不建议部署在 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:
标签:容器,Vue,tomcat,..,部署,js,打包 来源: https://blog.csdn.net/CSDN_X_W/article/details/104720179
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。