vue打包上线流程_vue项目打包上线流程-CSDN博客

本文链接：https://blog.csdn.net/zerolea/article/details/134575372

本文介绍了如何在Vue2和Vue3项目中更新配置，包括vue-cli的transpileDependencies和publicPath设置，路由模式的修改，处理axios跨域问题，以及在Vue3中使用vite.config.js。还讨论了CORS错误的解决方法和部署到Apache服务器的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2

1.添加vue-cli配置

在vue.config.js中添加如下配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  assetsDir: 'assets', //静态资源文件夹
})

2.修改路由模式

路由模式的取消历史模式

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})

3.修改axios实例参数

开发模式下会通过配置代理解决跨域问题，但是该配置在打包后的静态资源中不起作用，所以需要修改axois的baseURL，否则打包后就直接向 /api 这个东东发起请求了，但这玩意儿啥也不是，所以需要修改成真实的接口再打包。然后就可以直接build了

但是我的后端配置了允许所有请求源，所以静态资源通过文件协议也可以访问到数据

如果打包后访问时出现的 CORS 错误，就应该通过部署到支持 HTTP 协议的服务器解决，而不是依赖于 devServer 的代理配置。

4.上线服务器

传到apache服务管理的文件夹

访问成功！！！！！！！！！！

vue3

1.修改vite.config.js配置

export default defineConfig({
  //添加基础路径
  base: './',  //这个很重要！！！不加这一行打包后整个资源都无法访问
  plugins: [vue()],
  build: {
    target: 'es2015',
    outDir: 'dist',
    rollupOptions: {
      output: {
        entryFileNames: '[name]-[hash].js', // 引入文件名的名称
        chunkFileNames: '[name]-[hash].js', // 包的入口文件名称
        assetFileNames: '[name]-[hash].[ext]'  // 资源文件像 字体，图片等
      }
    }
  },
})