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 传输请求后重定向的端口号

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

如果需要在服务器放置大量静态图片。
修改Tomcatserver.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试试,
此文档长期更新!

发布了40 篇原创文章 · 获赞 13 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览