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.把打包好的数据压缩给后台,后台上传到服务器