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

小咪咪 2021-09-30 00:50 576阅读 0赞

### 打包配置 ###

使用`vue create myApp`创建的项目已经没有`webpack.config.js`文件了！  
我们新建的目录一般如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yY2VlbA_size_16_color_FFFFFF_t_70]  
并没有`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` 文件，找到以下内容：

<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 "%r" %s %b" />
    
          </Host>

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yY2VlbA_size_16_color_FFFFFF_t_70]: /images/20210812/237dfcc33d1e480994287b83dae49811.png