vite+vue3项目发布到手机-526互联

1.修改vite.config.js

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    hmr: true,

    host:"0.0.0.0",
    port: 5325,

    proxy: {
      '^/api/': {
        target: 'http://192.168.1.20:8599/',
        // target: 'http://192.168.0.253:8599/',
        changeOrigin: true, //跨域不重要,因为自己的APP没有edge那些限制
        rewrite: (path) => path.replace(/^\/api/, "")
      }
    }
  },
  base:'./', //插入base,修改基础地址为./ 否则生成的文件只有/开头
})

2.修改./router/index.js

const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL),
  history: createWebHashHistory(import.meta.env.BASE_URL), //history改为hash模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage
    },

  ]
})
export default router

3.单机打包

npm run build 生成 dist 项目文件夹,其中的.git文件夹没用
Hbuilder里新建H5项目,将dist文件夹中的所有文件直接复制到Hbuilder项目根目录
然后在Hbuilder中可以启动自带浏览器运行index.html了
但现在的问题是无法连接服务器.

   proxy: {
     '^/api/': {
       target: 'http://192.168.1.20:8599/',
       // target: 'http://192.168.0.253:8599/',
       changeOrigin: true,
       rewrite: (path) => path.replace(/^\/api/, "")
     }
   }

这段配置像是没有运行.决定修改axios的baseURL

4.修改api接口(蠢办法,重写所有接口)

随便建个js文件建立axios实体类,并配置

export const phoneAxios = axios.create({
  baseURL: 'http://192.168.1.20:8599',
  timeout: 2000,
})

然后接口调用的.vue里不再使用import {axios} from 'axios',换成import {phoneAxios} from '../../utils/tool'

axios.post("/api/preOutWage/phoneGetTodayOutWageList",{
    phoneToken:getToken()
  }).then(res=>{....

//修改为
phoneAxios.post("/preOutWage/phoneGetTodayOutWageList",{
    phoneToken:getToken()
  }).then(res=>{

重新打包并放入Hbuilder即可正常打包成APP运行

更进一步

将baseUrl改为APP内配置项方便将来服务器更换IP地址不需要重新生成app
由于不会在js文件中使用pinia还不破坏piniaPersist. 所以使用原生localStorage

axios实体类修改为

export const phoneAxios = axios.create({
  baseURL: localStorage.getItem("baseUrl"),
  timeout: 2000,
})

configration.vue里简单放个控件绑一下

const url = ref("")
url.value = localStorage.getItem("baseUrl")
function saveBaseUrl(){
  localStorage.setItem("baseUrl",url.value)
}

将来修改好baseUrl后只需要重启一下app就可以正常使用了