vue部署出错

关于vue部署

1.nginx转发

一般项目前后端分离得话，都会用nginx作为反向代理转发的。这里略过

2.部署到tomcat下

2.1vue项目的路由配置

因为项目上线，一般需要添加项目名，并且消去vue-router产生的#号，需要在router的配置下，在本项目是router->index.js下配置：

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);

export default new Router({
  base: "/webSite/", //项目名称 访问路由页面都需要加上这个,访问的根路径为http://ip:port/webSite
  mode: "history", //消去#
  routes: [
    {
      path: "/test",
      name: "test",
      component: resolve => require(["@/pages/test"], resolve)
    }]
})

2.2vue项目的静态资源配置

在打包后,会生成dist文件，文件下由以下部分组成：

打包后dist目录
如果打开static里面的css会发现由如下文件：
css文件
这些css都是webpack打包生成的，并且上面提到的index.html文件会引用这些文件。
如果不修改config下的index文件，打包生成的index.html对这些文件引用被打包为：
<script type=text/javascript src=/static/js/vendor.0ee9deae193305689fa2.js> </script>
显然这是不合理的，因为我们已经配置了根路径为http://ip:port/webSite，所以我们需要修改config下的index.js文件的内容：
找到index.js文件，找到build对象：
修改为assetsPublicPath的值为与上面的base的取值一致。

build: {
    // Template for index.html
    index: path.resolve(__dirname, "../dist/index.html"),

    // Paths
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "/webSite/",

    productionSourceMap: true,
    devtool: "#source-map",

    productionGzip: false,
    productionGzipExtensions: ["js", "css"],
    bundleAnalyzerReport: process.env.npm_config_report
  }

config

2.3vue项目配置完毕

至此，整个vue项目算是配置完毕，但是部署到tomcat下会出现访问图片没有带根路径的问题，如果你引用图片的方式和我一致，如下：

        <img :src="'../../static/images/'+code+'.png'" alt="icon">

那么可以尝试的解决方法是，重新配置tomcat的；

2.4tomcat的配置

首先在tomcat的webapps新建文件夹，文件夹名称和上面配置的根路径一致，即为webSite，然后将打包生成的dist文件夹里面的文件复制到webSite下，并且新建文件 WEB-INF/web.xml:
项目结构为：

项目结构

2.5配置静态资源服务

2.5.5.1修改server.xml文件

找到tomcat的conf文件下的server.xml，配置静态服务,找到HOST标签：
这里的配置为：

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

        <!-- SingleSignOn valve, share authentication between web applications
             Documentation at: /docs/config/valve.html -->
        <!--
        <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
        -->

        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <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" />
               <Context path="" docBase="webSite" reloadable="false" />
      </Host>

参考：tomcat配置静态服务

2.5.5.2修改新增的web.xml文件

增加这个文件是因为，解除#号，参考官网：
去除vue项目的#号
这里就直接丢配置了：

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">

  <display-name>webapp</display-name>
  <description>
     webapp
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/index.html</location>  
</error-page>  
</web-app>