vue cli3 项目服务器部署上线问题

vue cli3 部署上线问题

问题

将npm run build生成的dist文件夹（改名为edushop)
拷贝到自建的服务器（使用apache部署）下的webapp目录后访问：
域名:8080/ewshop出现如下错误：

打开调试台，发现所有的css和js资源都引用到了默认域名，因此需要在webpack中配置路径

资源引用路径问题

在vue3中修改webpack的配置（修改或新建vue.config.js)

 module.exports = {
    /**
     * 开发模式：删除publicPath
     * 生产模式：加上publicPath
     */
    publicPath:'/ewshop/',
}

如果使用了vue-router的历史路由模式还需要修改./src/router/index.js

const router = createRouter({
    /**
     * 开发模式：    history: createWebHistory(process.env.BASE_URL),
     * 生产模式：    history: createWebHistory('/ewshop/'),
     */
    history: createWebHistory('/ewshop/'),
    routes,
})

解决地址栏输入网址路由无法跳转的问题

以使用tomcat作为容器来说，在部署项目文件夹的根目录下新建/WEB-INF/web.xml，然后写入

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  version="4.0"
  metadata-complete="true">
 
  <display-name>xxxxxx</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>