vuejs項目如何部署到tomcat

這篇文章主要介紹“vuejs項目如何部署到tomcat”，在日常操作中，相信很多人在vuejs項目如何部署到tomcat問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vuejs項目如何部署到tomcat”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

vuejs項目部署到tomcat的方法：1、下載tomcat并解壓；2、修改vue下的“config/index.js”；3、增加“base:'/aoxinwechat/'”；4、執行npm run build；5、啟動tomcat即可。

本文操作環境：Windows7系統、Vue2.9.6、Dell G3電腦。

vuejs項目怎么部署到tomcat？

部署vue項目到tomcat上：

1、前提條件：有配置java環境，下載tomcat后解壓https://tomcat.apache.org/download-80.cgi，得到如下目錄

2、修改vue項目下config/index.js，注意dev和build都要改assetsPublicPath的配置

module.exports = {
  dev: {
    ...
    assetsPublicPath: './',
    ...
  },
  build: {
    ...
    assetsPublicPath: './',
    ...
  }
}

3、修改路由配置src/router/index.js，增加配置base: '/aoxinwechat/'，如果這里不配置，會導致部署的項目首頁訪問一片空白，但不報錯，且引入的文件有正常加載

export default new Router({
  //如打包文件存放在Tomcat/webapps/aoxinwechat下，
  //那么base就這么寫
  base: '/aoxinwechat/',
  mode: 'history',
  routes: [
      ...
  ]
})

4、執行npm run build，將打包生成的dist目錄下的所有東西粘貼到Tomcat/webapps/aoxinwechat路徑下，aoxinwechat是自定義的項目名

5、啟動tomcat，在tomcat下的bin目錄中雙擊startup.bat文件，或者打開命令行去訪問startup.bat，

訪問路徑格式>>ip:port/aoxinwechat，例如：http://localhost:8080/aoxinwechat/，即可訪問到Vue項目。

到此，關于“vuejs項目如何部署到tomcat”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！