vue-cli3如何部署在服务器的tomcat,以及vue.config.js如何配置才能上线(亲测可用)

1 篇文章 0 订阅

   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 ... 

  • 15
    点赞
  • 35
    收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页
评论 3

打赏作者

saiuna

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值