开发、测试调试问题的几种解决方案

　　在用vue-cli开发vue项目时，需要现在本地服务器上开发、测试，然后当需要调用后端端口的时候，又需要先npm run build打包，将打包后的dist文件夹下的文件再放到Tomcat服务器下，进行测试，这无疑是非常麻烦的，这里记录了我尽可能简化操作的几种方案。

 

第一种：直接在webpack中设置将文件打包到Tomcat服务器下

　　通常来说，通过vue-cli构建的项目，会把dist文件打包到根目录下，但是我在测试时还需要再将之copy到Tomcat下，这样很不方便，所以不如就直接打包到Tomcat下。

　　即打开config下的index.js，找到build下的相关选项，修改如下：

    // index: path.resolve(__dirname, '../dist/index.html'),
    // assetsRoot: path.resolve(__dirname, '../dist'),
    index: path.resolve(__dirname, '../../../programs/apache-tomcat-7.0.42/webapps/bbg/wechat2/index.html'),
    assetsRoot: path.resolve(__dirname, '../../../programs/apache-tomcat-7.0.42/webapps/bbg/wechat2'),

　　于是，我们再进行打包时，就可以直接打包到Tomcat下了。 这样就节约了大部分的时间。  

　　优点： 节约了打包之后复制、粘贴的时间。

　　缺点： 仍然无法直接调试，并且还是需要打包这一步！  

 

第二种：使用代理服务器

　　首先我们应该知道为什么会出现这篇博客所提的问题，那是因为我们在本地开发的时候如果使用nodejs提供的服务器是不能直接访问接口的，有跨域的问题，所以必须要在Tomcat下进行访问，因为tomcat下部署了一个war包，相当于直接部署了环境，然后在这样的环境下访问，就不存在跨域问题了。 所以我们的程序能直接在Tomcat下运行不就可以了吗！

　　为了解决这个问题，我想有两种方案可以实施，第一种就是类似于直接将打包好的文件放在Tomcat下，然后进行调试，但是这样的方法的问题是我们没有办法进行直接的修改，因为Tomcat的文件时打包过的文件，是应该部署上去的，就算修改了，开发的文件也是不会被修改的。

　　第二种解决方案是：在webpack中配置代理服务器。 即在config文件夹下配置:

    proxyTable: {
        '/api': {
          target: 'http://127.0.0.1:8090/',
          changeOrigin: true,
          pathRewrite: {
            '^/api': '/'
          }
        }
      },

　　也就是说在node运行起来的时候，使用Tomcat服务器作为代理，这样就不存在跨域的问题了。

　　需要注意的是，这里配置了api，所以在请求的时候也要添加api，如

axios({
    method: "get",
    url: "/api/bbg/shop/get_classify",

　　而真实的接口又不存在api，所以我们要使用pathRewrite将api替换。 如下：

     pathRewrite: {
            '^/api': '/'
          }

　　但是这样会出现这样的一个问题：就是我们在请求每一个端口的时候都需要添加一个api，这样是很麻烦的，如果使用axios就好说了，我们可以进行这样的配置：

axios.defaults.baseURL = '/api'

　　这样，我们就可以直接使用原来的端口了。

　　这种方法简直没有缺点，非常完美！  

　　感谢王豪学长的提醒， 哈哈， 虽然你也看不到~

　　有时可能Tomcat会突然慢，然后还报504的错误，不妨换一个端口。