vue3+ts+vite 上线打包流程步骤（亲测有效）

vue3+ts+vite 上线打包流程步骤（亲测有效）

1.设置代理，以及解决跨域问题在vite.config.ts文件中

 server: {
    open:true,   //默认启动项目打开页面
    port:5173,   //端口号
    proxy: {
      "/api": {
        // 匹配请求路径，
        target: "http://xxxxxx",//正式域名
        changeOrigin: true,
        // secure: true, // 是否https接口
        ws: true, // 是否代理websockets
        rewrite: (path) => path,
        // rewrite: (path) => path.replace(/^\/api/, '') (看接口具体情况)
      },
    },
  },

2.新建一个文件（.env.staging）在根目录上

3.在（.env.staging）中写入如下代码：（VITE_是必须加的，MODE可有可没有）

MODE = 'staging'
VITE_DEV_SERVER = http://localhost:5173
VITE_SERVER = http://xxxxxxx (正式域名)

4.在request.ts文件中进行路径判断

let baseURL = ''
if(import.meta.env.MODE === 'staging') { // 预备模式
    baseURL = process.env.NODE_ENV === 'development' ? import.meta.env.VITE_DEV_SERVER : import.meta.env.VITE_SERVER
} else { // development或production模式
    baseURL = ''
}

// 创建axios实例
const request = axios.create({
    baseURL:baseURL+'/api',// 所有的请求地址前缀部分(没有后端请求不用写)
   .....
})

request.ts完整代码：

import axios from 'axios'
import router from '../routes'
let baseURL = ''
if(import.meta.env.MODE === 'staging') { // 预备模式
    baseURL = process.env.NODE_ENV === 'development' ? import.meta.env.VITE_DEV_SERVER : import.meta.env.VITE_SERVER
} else { // development或production模式
    baseURL = ''
}

// 创建axios实例
const request = axios.create({
    baseURL:baseURL+'/api',// 所有的请求地址前缀部分(没有后端请求不用写)
    timeout: 80000, // 请求超时时间(毫秒)
    withCredentials: true,// 异步请求携带cookie
    headers: {
    // 设置后端需要的传参类型  
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest',
    },
})
 
// request拦截器
request.interceptors.request.use(
    config => {
        // 如果你要去localStor获取token,(如果你有)
        let token = sessionStorage.getItem("x-auth-token")
        if (token) {
            // 添加请求头
            config.headers["Authorization"] = "Bearer " + token
            config.headers["token"]=  token
        }
        return config
    },
    error => {
        // 对请求错误做些什么
        Promise.reject(error)
    }
)
 
// response 拦截器
request.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        const res =  response.data
        if(res.code === 1) return res
        if (res.code === -2) {    
            ElMessage.error('请先登陆！')
            router.push({
               path:'/Login'
            }) 
            return res
        }
        if(res.code !== 1 && res.code !== -2) return ElMessage.error(res.msg)
    },
    error => {  
        // 对响应错误做点什么
        return Promise.reject(error)
    }
)
export default request

4.在package.json中加入运行代码

"dev:staging": "vite dev --mode staging",
"build:staging": "vite build --mode staging",
"build-only-staging": "vite build --mode staging",

5.在终端运行

npm run dev:staging //会运行VITE_DEV_SERVER 数据
npm run build:staging //会运行VITE_SERVER数据进行打包

6.把打包好的数据压缩给后台，后台上传到服务器