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: