当前位置：首页 > VUE

vue实现线上打包

2026-02-19 12:24:59VUE

Vue 项目线上打包的实现方法

配置生产环境打包命令

在 package.json 中配置打包命令：

"scripts": {
  "build": "vue-cli-service build"
}

环境变量配置

创建 .env.production 文件配置生产环境变量：

NODE_ENV=production
VUE_APP_API_BASE_URL=https://api.example.com

优化打包配置

在 vue.config.js 中添加优化配置：

module.exports = {
  productionSourceMap: false,
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

静态资源处理

设置 publicPath 确保资源路径正确：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/your-project-name/'
    : '/'
}

执行打包命令

运行以下命令生成打包文件：

npm run build

部署到服务器

打包完成后，将生成的 dist 目录上传至服务器，配置 Nginx 或其他 Web 服务器指向该目录。

CDN 加速（可选）

配置 CDN 加速静态资源加载，在 vue.config.js 中设置：

module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].cdn = {
        css: ['https://cdn.example.com/style.css'],
        js: ['https://cdn.example.com/vue.js']
      }
      return args
    })
  }
}

自动化部署（可选）

使用 CI/CD 工具如 GitHub Actions 或 Jenkins 实现自动化部署流程，示例 GitHub Actions 配置：

vue实现线上打包

name: Build and Deploy
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - run: npm install
    - run: npm run build
    - uses: actions/upload-artifact@v2
      with:
        name: dist
        path: dist