文章目录

项目背景

最近一个Vue3项目 ，想实现一次打包，在线上通过修改配置文件config.js 的方式实现灵活部署。http://ip:port/xxx/
其中xxx 可以通过config.js 来灵活配置。

部署架构

vue3+router hash + publicPath （./）

详细配置

1.vue.config.js


module.exports = {
  lintOnSave: false,
  productionSourceMap: false,
  publicPath: './'
 
}

2.config.js

window.cusconfig = {
  // http
  axiosUrl: 'http://xxx:8088',
  // socket
  socketUrl: 'http://xxx:8088/webSocket',
  // admin 或 bi
  router: 'bi',
  // 请求二级目录，此处路径要和nginx location 一一对应
  routerPath: '/touristflow-bi/'
}
  1. router /index.js
import { createRouter, createWebHistory } from 'vue-router'

// const baseRouter = 'flow'
// const publicPath = '/touristflow-bi/'

// const baseRouter = 'admin'
// const publicPath = '/touristflow-admin/'

const adminRoutes =
   [{
     path: window.cusconfig.routerPath,
     name: 'Admin',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/Admin.vue')
   }]
const routes = [

  {
    path: window.cusconfig.routerPath,
    name: 'Screen',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Screen.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  // base: '/touristflow-bi',
  routes: window.cusconfig.router === 'admin' ? adminRoutes : routes
})

export default router
  1. index.html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="./favicon.ico">
    <title>xxx系统</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="./config.js"></script>
  </body>
</html>
  1. request.js
import axios from 'axios'
import { ElMessage } from 'element-plus'
const baseURL = window.cusconfig.axiosUrl

const service = axios.create({
  // axios 的一些配置，baseURL  timeout
  baseURL,
  timeout: 5000
})

service.interceptors.request.use(config => {
  // const token = 'c5b76575-0a0a-4047-8bad-c29215bd331f'
  // if (token) {
  //   config.headers['X-Token'] = token
  // }
  return config
}, err => {
  return Promise.reject(err)
})

service.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return response.data
    } else {
      // console.log(response)
      Promise.reject(response)
    }
  },
  error => {
    ElMessage({
      message: '网络发生错误',
      type: 'error'
    })
    // console.log(error)
    return Promise.reject(error)
    // return false
  }
)

export default service
  1. nginx.conf 配置
worker_processes  1;

events {
    worker_connections  4096;
}


http {
    include       mime.types;
    default_type  application/octet-stream;


    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       800 ;
		server_name  localhost;
		
       
		 #大屏
		location /touristflow-bi{    
			alias F:\\nginx-1.20.2\\bi\\;
			index index.html index.htm;
			try_files $uri $uri/ /bi/index.html;
		}
		location /admin{    
			alias F:\\nginx-1.20.2\\bi\\;
			index index.html index.htm;
			try_files $uri $uri/ /bi/index.html;
		}
	
       # 后台服务
        location /touristflow{
              proxy_pass http://localhost:30080/touristflow/;
              proxy_set_header   Real-URI $request_uri;
            	proxy_set_header   Host    $host;
            	proxy_set_header   X-Real-IP   $remote_addr;
            	proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
    }

}

小结

  1. 通过vue.config.js 里publicPath = ./ 打出来的是相对路径的包，可以部署到任意路径下。
  2. 配合nginx 的请求路径可以指定url 的二级目录，打完的包可以通过alias 任意指定物理位置。
# nginx
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区