vue-cli项目打包部署到tomcat服务器

打包配置

使用vue create myApp创建的项目已经没有webpack.config.js文件了！
我们新建的目录一般如图：

并没有webpack.config.js文件，这个时候我们需要新建一个vue.config.js文件，写入以下内容。

// vue.config.js
module.exports = {
    // 选项...
    publicPath: './'
}

自此便可以运行yarn bulid进行打包，之后会生成一个dist文件夹这个便是我们要发到服务器上的文件。

部署

找到并打开tomcat服务的webapps文件夹，把dist文件夹放进来即可！(适用于windos系统和linux系统)
重启tomcat。打开你的服务地址便可以访问，例如我用的本地端口localhost:8081/dist/index.html

修改Tomcat默认监听端口

方法如下，更改 tomcat /conf /server.xml 文件，找到以下内容：

<!-- port 默认是8080可以改 -->
<Connector port="8081" protocol="HTTP/1.1"   
               connectionTimeout="20000"
               redirectPort="8443" />

• port：作为一个网络server端,它需要暴露一个socket端口来accept客户端的链接,可以通过port指定。即Tomcat的监听端口。

• protocol：使用的网络协议,表示tomcat使用何种方式来接受和处理client端请求,"HTTP/1.1"是默认值,等效 "org.apache.coyote.http11.Http11Protocol"。
  还有熟悉的"AJP/1.3";关于HTTP和AJP两种方式的区别和性能优劣可以参见其他文档。在Tomcat 6.0之后,还提供了NIO的方式,可以有效的提升性能,特别是在大量长连接/数据上传+下载等web应用中。此时 portocal="org.apache.coyote.http11.Http11NioProtocol".

• connectionTimeout： 指定超时的时间数( 以毫秒为单位)

• redirectPort：指定服务器正在处理http 请求时收到了一个SSL 传输请求后重定向的端口号

设置静态文件夹让远程可访问

如果需要在服务器放置大量静态图片。
修改Tomcat的server.xml文件，找到 <Host ...

<Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

     // 添加这句话
        <Context path="picture" docBase="C:/ceel/Bing" path="/images" debug="0" reloadable="true" /> 
     // end 
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />

      </Host>

• path是映射的虚拟路径，
• docBase是静态资源存放的真实物理路径，
• reloadable指有文件更新时，是否重新加载，一般设置为 true后，tomcat不需要重启启动，自动热加载！

name 设置成 localhost 。如果访问不到改为本机IP试试,
此文档长期更新！