vue3项目打包与上线详细图文教程

export default defineConfig({
  esbuild:{//打包时去除console和debugger代码
    drop:["console","debugger"]
  },
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }), vue(), vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 3000,
    open: false, //自动打开 
    base: "./ ", //生产环境路径
    proxy: { // 本地开发环境通过代理实现跨域，生产环境使用 nginx 转发
      // 正则表达式写法
      '/m.api': {
        target: 'http://192.168.1.188:8080', // 后端服务实际地址
        changeOrigin: true, //开启代理
      }
    }
  },
})

npm run build

npm run preview

onBeforeUnmount(() => {//防止echarts带来的空白bug
    if (column) {
        column.dispose()
        column = undefined
    }
    if (line) {
        line.dispose()
        line = undefined
    }
    if (pie) {
        pie.dispose()
        pie = undefined
    }
    if (pies) {
        pies.dispose()
        pies = undefined
    }
})

<link rel="icon" href="./favicon.ico" rel="external nofollow" >
改为
<link rel="icon" href="/favicon.ico" rel="external nofollow" >
 
<link rel="stylesheet" href="./public/iconfont/iconfont.css" rel="external nofollow" >
改为
<link rel="stylesheet" href="/public/iconfont/iconfont.css" rel="external nofollow" >

history: createWebHistory(import.meta.env.BASE_URL)
改为
history: createWebHashHistory(import.meta.env.BASE_URL)

location / {//解决刷新404问题
  try_files $uri $uri/ /index.html;
}
 
location /m.api {//解决跨域问题
  proxy_pass http://192.168.1.188:8080(跨域代理)
}