使用vue-cli建立的项目在生产环境（npm run build）时的一系列问题

Question

我新学习vue,跟着视频使用vue-cli做了一个项目,这是我的项目地址,在开发环境下能够正常运行,但是当我使用npm run build打包以后，访问打包后的文件夹dist，结果有一系列问题。

其中部分我尝试解决了，如通过修改build/utils.js和config/index.js，解决css和js资源位置不对的问题、css图片路径不对的问题，但是还有一系列的问题没有解决。主要包括项目路径、vue-router的history模式服务器配置、图片路径错误等

问题一： 项目不在根目录下时，vue-router中该如何书写路径
描述
本地apache服务器的根目录在htdocs文件夹下，而我的项目在其projects/vue-project1/子文件夹中，因此我在项目的src/router/index.js中各个子页面的路径都以/projects/vue-project1/dist开头，然而如果别人通过github下载我这个项目岂不是都得放在projects/vue-project1/目录下，怎样才能不受项目的具体位置影响呢？

我在项目文件夹下的src/router/index.js配置各个页面路径时，提供了两个路径，在开发和生产环境下手动切换。如何能不手动切换、其他下载该项目的人也不必手动输入他自己的文件夹位置呢？

问题二： vue-router使用history模式，该如何配置服务器
描述
我用的是apache2.4 httpd在本机提供web服务，如果直接在导航栏输入主页外的子页面地址会显示404错误，官网说使用history模式时要配置服务器。然而如果简单地将官网apache服务器的配置文本（ https://router.vuejs.org/zh-cn/essentials/history-mode.html）粘贴到配置文件conf/http.conf中并不起作用，无法通过输入vue-router中的导航地址直接访问相应子页面。

另外我希望能通过github的gh-pages分支创建项目主页，对于由vue-cli使用vue-router的history模式创建的项目是否不可行。

问题三：在开发环境下，如果简单使用a标签和相对路径也能正确的访问页面，但是一旦进入生产环境这种链接就失效了，会报404错误。
描述
如图，这些链接是直接用a标签使用相对路径写的，没有使用router-link，这在开发环境下正常，但是在生产环境中就不行了（个人理解和直接在浏览器导航位置直接输入子页面位置返回404是一个问题）。

问题四： 轮播图片从其他页面切回来后无法找到
描述
主页面中的轮播图在第一次进入时能够正常显示，这时如果我们切换到另一个页面（点击导航条上产品购买页面或订单列表页面），再点击Vue图标切回来时，发现轮播图的图片显示无法找到（请求图片的地址错了，应该是 http://127.0.0.1/projects/vue-project1/dist/static/img/picx.xxxxxxx.jpg ，缺少了/dist）。

问题五：子页面的图片无法加载
描述
产品购买子页面的图片显示不了。

查看开发窗口，发现图片请求的路径有问题。正确位置应该是http://127.0.0.1/projects/vue-project1/dist/static/img/pic.xxxxxxx.jpg。

虽然这种问问题的方式太不像个程序员。。。在此先谢过

Answer 1

我尝试对这五个问题发表一下自己的想法，如有不对还请指正，
问题一： 项目不在根目录下时，vue-router中该如何书写路径

这个是打包路径的问题，打包路径和路由无关，在config/index.js 中的assetsPublicPath进行配置

问题二： vue-router使用history模式，该如何配置服务器

history模式的路由我曾经用过，但是不论是history还是hash，我都没有依赖后台的处理，history返回不刷新，后来我用了vue-navigation配合hash使用的，目前还算正常

问题三：在开发环境下，如果简单使用a标签和相对路径也能正确的访问页面，但是一旦进入生产环境这种链接就失效了，会报404错误。

我司做的是基于微信端的商城项目，整个项目都没有使用a标签，通过命名路由，访问内部相对地址，外部地址用window.location.href访问

问题四： 轮播图片从其他页面切回来后无法找到

这个问题没有遇到过，关于轮播我用的是vue-awesome-swiper，你的问题会不会和history路由有关呢？返回页面后重新加载数据，是否可行？

问题五：子页面的图片无法加载

//page/Detail.vuejs代码做如下修改
  export default {
    data () {
      return {
        products: [{
          name: '流量分析',
          path: 'analysis',
          active: false
        },
        {
          name: '数据统计',
          path: 'count',
          active: false
        },
        {
          name: '数据预测',
          path: 'forecast',
          active: false
        },
        {
          name: '广告发布',
          path: 'publish',
          active: false
        }
        ],
        imgMap: {
        //使用路由名称
          'Count': require('../assets/images/1.png'),
          'Forecast': require('../assets/images/2.png'),
          'Analysis': require('../assets/images/3.png'),
          'Publish': require('../assets/images/4.png')
        }
      }
    },
    computed: {
      productIcon () {
      //使用命名路由
        return this.imgMap[this.$route.name]
        
      }
    }
  }

都是同行多多交流。。

//使用v-for时最好加上key值