Vue项目打包并部署到tomcat

注：不建议部署在 tomcat 上，建议部署在 Nginx，参考：vue项目打包并部署到 Nginx
 

一、打包Vue项目

前期准备

    为避免部署后出现无法访问和页面空白等问题，需要修改三处的内容，文件位置如下：

1. 在 /build/untils.js 添加publicPath: '../../'，添加后如下：

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

2. 在 /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')
  },

3. 修改 /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服务器

运行环境

1. 阿里云ECS
2. Ubuntu 系统
3. Docker容器化
   注： 默认已经通过Docker下载好tomcat镜像

部署过程

1. 运行 tomcat 容器(如果下载的特定版本需加版本号)：
   docker run --name my-tomcat -p 8080:8080 tomcat
   注： Docker 下tomcat容器 /webapps文件夹下为空，因此这时去浏览器访问 “ip:8080/” 是无法访问到任何内容的。
2. 进入容器，并在 /webapps下新建文件夹 xxx（因为将打包好的文件直接放到webapps下是无法访问的）
   进入容器命令：deocekr exec -it 容器名 bash
3. 将打包好的文件（/dist 文件 index.html 和static文件夹）放到tomcat容器 /webapps/xxx/ 下
   涉及的命令：
   ①. docker cp 宿主机中文件路径及容器文件名 容器名：要拷贝到容器里面对应的路径
4. 在浏览器访问：http://ip:8080/xxx/

  
  
Email : [email protected]
Website : http://beyonderwei.com
  
WeChat: