Trong quy trình phát triển ứng dụng Vue, file vue.config.js đóng vai trò là điểm đến chính để tùy chỉnh hành vi của CLI Service. Khi tồn tại ở gốc dự án cùng cấp với package.json, nó sẽ được hệ thống tải tự động.

Cấu trúc cơ bản yêu cầu xuất một đối tượng chứa các thuộc tính cấu hình:

// vue.config.js
module.exports = {
  // Các tham số tùy chỉnh
}

Quản Lý Đường Dẫn Và Thư Mục Xuất Bản

Với các thuộc tính liên quan đến vị trí triển khai, bạn cần chú ý các điểm sau để đảm bảo đường dẫn tài nguyên hoạt động đúng cách trên server thực tế.

• Điểm truy cập cơ sở (publicPath): Thay thế cho thuộc tính cũ baseUrl. Giá trị này xác định tiền tố URL khi deploy. Mặc định là dấu nháy chéo /. Nếu ứng dụng nằm trong folder con như /admin/, hãy gán giá trị tương ứng. Bạn có thể dùng biểu thức điều kiện để tách biệt môi trường Dev và Prod:

const env = process.env.NODE_ENV;
module.exports = {
  publicPath: env === 'production' ? '/app-v2/' : '/'
};

• Thư mục đích (outputDir): Nơi lưu trữ kết quả sau lệnh build. Tên mặc định là dist.
• Nơi chứa tài nguyên tĩnh (assetsDir): Thư mục con bên trong thư mục đích để giữ các file JS, CSS, ảnh. Để trống nghĩa là nằm ngay trong thư mục build.
• Tên file trang chủ (indexPath): Đặt tên mới cho file index.html khi hoàn thành gói sản phẩm.

Hiệu Suất Và Quy Trình Build

Để tối ưu kích thước bundle và tốc độ biên dịch, hãy cân nhắc các cờ bật tắt sau:

• Lưu hash vào filename (filenameHashing): Mặc định true để phân mảnh bộ nhớ đệm của trình duyệt tốt hơn. Tắt đi nếu bạn cần lấy file HTML thủ công thay vì dùng bản generate sẵn.
• Kiểm tra lỗi cú pháp (lintOnSave): Khi cài đặt plugin ESLint, thiết lập true để cảnh báo lỗi khi lưu file nhưng không dừng build, giúp trải nghiệm dev mượt mà hơn.
• Bộ biên dịch thời gian chạy (runtimeCompiler): Bật lên (true) cho phép dùng attribute template trong component JavaScript, nhưng làm tăng dung lượng khoảng 10KB. Nên để false nếu chỉ dùng file .vue.
• Giao diện Source Map (productionSourceMap): Hỗ trợ debug chi tiết vị trí lỗi trên code gốc từ file minify. Tắt (false) nếu muốn giảm thời gian build trong môi trường chạy thật.

Tùy Chỉnh Cấu Hình Webpack

Có hai cách tiếp cận để mở rộng khả năng của bundler, tùy thuộc vào mức độ phức tạp của nhu cầu.

Dùng configureWebpack phù hợp khi cần thêm plugin đơn giản hoặc sửa cấu hình theo kiểu merge đối tượng:

const MyPlugin = require('my-custom-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new MyPlugin({ mode: 'enhanced' })
    ]
  }
};

Nếu cần thao tác trực tiếp lên cấu hình gốc hoặc kiểm soát luồng điều khiển dựa trên môi trường, hãy dùng dạng hàm:

module.exports = {
  configureWebpack: (cfg, ctx) => {
    if (!ctx.isDevelopment) {
      cfg.mode = 'optimization';
    }
    return cfg;
  }
};

Ngược lại, chainWebpack sử dụng thư viện Tapable để thao tác chuỗi sự kiện, mạnh mẽ hơn khi cần loại bỏ hoặc sửa đổi loaders cụ thể:

module.exports = {
  chainWebpack: cfg => {
    cfg.module
      .rule('scripts')
      .use('babel')
      .tap(options => {
        options.presets.push('@vue/app');
        return options;
      });
  }
};

Xử Lý Kiểu Mẫu CSS

Hệ thống quản lý CSS cung cấp ba tùy chọn quan trọng nằm trong đối tượng css:

1. extract: Liệt kê CSS riêng biệt thay vì inject vào JS. Tự động bật ở Production, nên tắt ở Dev để hỗ trợ Hot Reloading nhanh chóng.
2. sourceMap: Tạo map cho CSS để debug style, có thể làm chậm build.
3. loaderOptions: Truyền tham số sâu vào css-loader hoặc postcss-loader thông qua lớp trung gian.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/styles/_variables.scss";'
      }
    }
  }
};

Cài Đặt Server Phát Triển

Đối tượng devServer kế thừa hầu hết tính năng của webpack-dev-server.

Để server có thể truy cập từ mạng nội bộ khác, hãy chỉ định host là 0.0.0.0. Lưu ý, các tham số như port hay https vẫn có thể bị CLI override qua dòng lệnh.

module.exports = {
  devServer: {
    host: '0.0.0.0',
    open: true,
    disableHostCheck: true 
  }
};

Lưu ý: Chỉ bật disableHostCheck khi chắc chắn về an ninh mạng nội bộ.

Một vấn đề phổ biến là CORS khi Frontend và Backend chạy trên cổng khác nhau. Giải pháp là sử dụng proxy để chuyển hướng request API:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-service:3000',
        changeOrigin: true,
        secure: false
      }
    }
  }
};

Trình tự này sẽ chuyển mọi requet bắt đầu bằng /api về server backend đã định nghĩa, giúp tránh xung đột giao thức trong quá trình thử nghiệm.