Vue + Tomcat打包(Mac)

Vue + Tomcat打包(Mac)

一、 部署到Tomcat

1. 在路由中添加base: '/demo'
2. npm run build 生成dist文件
3. 在Tomact安装下目录下的webapps新建文件夹demo，将dist下的index.html和static文件夹拷贝到demo中
4. 启动Tomcat服务器

   cd Tomcat安装路径
   cd bin
   sudo sh startup.sh // 启动服务器
   sh ./shutdown.sh   // 关闭服务器
   

5. 浏览器打开http://localhost:8080/demo

二、 Vue打包后打开dist/index.html易出现问题解决

2.1 Failed to load resource: net::ERR_FILE_NOT_FOUND

1. config/index.js

   build: {
       index: ...,
       assetsRoot: ...,
       assetsPublicPath: './'
   }
   

2. build/webpack.prod.conf.js

   output: {
       path: ...,
       filename: ...,
       chunkFilename: ...,
       publicPath: './'
   }
   

3. build/webpack.base.conf.js

   output: {
       path: ...,
       filename: ...,
       publicPath: process.env.NODE_ENV === 'production'
           ? './' + config.build.assetsPublicPath
           : './'+ config.dev.assetsPublicPath
   }
   

2.2 用到了一些特别的格式如ttf字体文件之类后读取不到 net::ERR_FILE_NOT_FOUND

• build/utils.js

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