vue-cli3如何部署在服务器的tomcat,以及vue.config.js如何配置才能上线（亲测可用）_tomcat 配置转发 vue代理

   vue3.0比2.0简化很多，build文件也没了，很多配置都是默认的，这两天上线查了很多资料都是2.0配置，cli3甚少~本人亲测可用的过程及配置如下（新手一个）：

---

一、首先在根目录下创建vue.config.js文件

const path = require('path');
var env = process.env.NODE_ENV
function resolve(dir) {
    return path.join(__dirname, dir)
}
// 上面代码貌似没用上，不过不碍事
module.exports = {
    //基本路径
    baseUrl: './', //加 ./ 解决404问题
    outputDir: 'dist',
    // 放置静态资源的地方 (js/css/img/font/...)
    assetsDir: 'static',
    //以多页模式构建应用程序。
    pages: undefined,
    //是否使用包含运行时编译器的 Vue 构建版本
    runtimeCompiler: false,
    parallel: require('os').cpus().length > 1,
    // 是否在保存的时候使用 `eslint-loader` 进行检查。
    // 有效的值：`ture` | `false` | `"error"`
    // 当设置为 `"error"` 时，检查出的错误会触发编译失败。
    // lintOnSave: false,
 
    // 是否为生产环境构建生成 source map？这样打包的dist文件体积会很小（正式版）
    //为true带测试环境，提交会大很多
    productionSourceMap: false,
  devServer: {
	host: '0.0.0.0',
	port: 8080,
	publicPath: '../',  //这里解决静态资源引用路径问题
    // 设置代理
    proxy: {
      "/api": {
        target: "你的服务器域名，或ip/", // 跨域访问
        ws: true, // 是否启用websockets
        changOrigin: true, //开启代理
        secure: false, // 将安全设置为false,才能访问https开头的
         pathRewrite: {
          '^/api': '/' //这里理解成用‘/api’代替target里面的地址
        }
      }
    }
  },
};

 

devServer:{}下的代码是我在本地开发的时候为跨域问题及https开头的服务器ip地址所解决的配置,其中：

注：  如下代码在本地的运行时候要注释掉，配置只是为打包上线用的

 baseUrl: './',
    outputDir: 'dist',
    assetsDir: 'static',
    pages: undefined,
    runtimeCompiler: false,
    parallel: require('os').cpus().length > 1,
    productionSourceMap: false,
 
    publicPath: '../',是上线所需的额外配置，本地测试的需要需要注释掉

 

二、上面只是本地与上线的配置而已，接下来看路由

   在本地测试的时候大多数在router.js配置的mode是history模式（2.0版本是router下的index.js），history需要在服务器的tomcat和nginx配置映射参数，后期做了再更新吧，如果需要的话，先上线，用hash模式，因为这样不用服务器配置任何东西，先把引用资源路径及404，还有请求的路径解决了再去整history模式,看路由配置

  这里的base很重要，这里base的名称是放在tomcat的webapps下的文件，后面打包生成的dist下的所有文件取出来放在你自定义名称的文件下，不改的话就直接base:'/dist’, 因为3。0版本webpack4和cli3打包后的静态资源及index.html都是方向在dist文件下的，直接拷贝到tomcat的webapps下~  接下来如何访问（这里以我的为例）：例如： https://.....你的ip或域名../v1.0/即可

 

三、这时候会发现静态资源和跳转没有问题了，不过无法发起求情

思想很重要，查看报错，显示 https:// ... ../api/... state 404，大概如此，其中api是封装起来的域名，看图吧

 

  因为我是将api封装起来，如果是直接this.get（...）的方式的话，因为部署到服务器的话，此时打包放在服务器相当于在自家发起请求，就不用加前缀了，例如上图： /项目名/控制层/方法 

好啦，上面配置完，打包扔个后台上传服务器就行了

觉得好的几得点个赞呀，转载请附链接呀~萌新不易

---

更新   Time line  -------------------2020-03-18-----------------------------------------------------

 

最近自己上线了一个，Tomcat + springboot + vue ,部署nginx ,打包方式又跟以往不同了些，build方式官方也提示了一些修改

方式一：后台后前端包同放tomcat上

官方不推荐用baseUrl了：

baseUrl： './',  改用    publicPath: './', 至于为什么是./呢，看后台war/jar 与 build的包放置的位置（同在tomcat上的话）

module.exports = {
		//基本路径
        publicPath: './',
		outputDir: 'dist',
			// 放置静态资源的地方 (js/css/img/font/...)
        assetsDir: 'static',
		//以多页模式构建应用程序。
		pages: undefined,
		//是否使用包含运行时编译器的 Vue 构建版本
		runtimeCompiler: false,
		parallel: require('os').cpus().length > 1,
		// 是否为生产环境构建生成 source map？
        productionSourceMap: false,
		 devServer: {
			host: '0.0.0.0',
			port: 8091,
			// publicPath: '../',
			// 设置代理
			proxy: {
				"/api": {
					target: 
					"http://你的IP或者域名/",// 跨域访问
					ws: true, // 是否启用websockets
					changOrigin: true, //开启代理
					secure: false, // 将安全设置为false,才能访问https开头的
			pathRewrite: {
						'^/api': '/'
					}
				}
			}
		 },

可以看到上图，比以前的简洁一些，此处的  代理名称 api若是跟其他应用服务冲突的话，需要修改成其他的。

      此时路由的配置：直接用hash,也可以改为history模式，那样就不会带#号了，base我是直接注释掉了，因为已经在nginx上配好了，到此 npm  run build 打包上传即可。

mode: 'hash',
// base: process.env.BASE_URL,

   

跨域打包：打包可以按上图打包，此为跨域模式，用于nginx

axios的配置如下

import axios from 'axios';
axios.defaults.withCredentials = true;
const service = axios.create({
		baseURL: '/api/',
        timeout: 5000 //超时时间
});

Nginx配置 （环境： 阿里云 centos 7）

进入到nginx的nginx.conf配置文件

		location /v1.0/{
		    proxy_pass http://127.0.0.1:9090/v1.0/;
			proxy_set_header  X-Real-IP  $remote_addr;
			proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
			proxy_set_header  Host  $http_host;
		}

注：

  1.     /v1.0/    =>  v1.0是我把前端打包的文件放在了v1.0下， 直接把默认的dist文件名改成v1.0，自定义名称即可，按默认dist也行的的话直接配置 /dist/

 2. 由于转发一次到跨域代理名称 api （可自定义，避免冲突），再加一个配置，这样，遇到v1.0的时候进入自己的后台项目，但由于跨域api，前端控制台F12可以看到自己的api请求有一个/api/, 这时候就再转发到 /v1.0/api 就好了。

location /v1.0/api/{
		   proxy_pass http://127.0.0.1:9090/项目名称/;
		   proxy_set_header  X-Real-IP  $remote_addr;
		   proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
		   proxy_set_header  Host  $http_host;
		}

配置完重启nginx。

 

 

非跨域打包：不想配置nginx，嫌麻烦直接用ip/域名 + 端口 及一些路径访问的话

直接在在axios的配置中的baseUrl修改成访问后台的前缀即可，不涉及跨域

baseUrl: 'http://ip地址/端口/项目名或其他自定义名称'

或者vue直接配置开发与线上环境更好，就不用去做更改，原理也是监测到线上环境时候，替换为线上的访问地址。

baseURL: process.env.VUE_APP_BASE_API,

 

方式二： 后台放tomcat, 前端放nginx ...