VueJS: Tham khảo cấu hình

Khóa học qua video:

Cấu hình CLI toàn cầu

Một số cấu hình chung cho @vue/cli, chẳng hạn như trình quản lý gói ưa thích của bạn và các giá trị đặt trước được lưu cục bộ của bạn, được lưu trữ trong một tệp JSON có tên .vuerc trong thư mục chính của bạn. Bạn có thể chỉnh sửa tập tin này trực tiếp với trình soạn thảo của bạn lựa chọn để thay đổi các tùy chọn đã lưu.

Bạn cũng có thể sử dụng lệnh vue config để kiểm tra hoặc sửa đổi cấu hình CLI toàn cầu.

Trình duyệt mục tiêu

Xem phần Tương thích trình duyệt trong hướng dẫn.

vue.config.js

vue.config.js là một tệp cấu hình tùy chọn sẽ được tải tự động @vue/cli-service nếu nó có trong dự án gốc của bạn (bên cạnh package.json). Bạn cũng có thể sử dụng trường vue trong package.json, nhưng lưu ý trong trường hợp đó, bạn sẽ bị giới hạn chỉ các giá trị tương thích với JSON.

Tệp sẽ xuất một đối tượng chứa các tùy chọn:

// vue.config.js
module.exports = {
  // các tùy chọn...
}

#baseUrl

Kiểu: string
Mặc định: '/'

URL cơ sở mà gói ứng dụng của bạn sẽ được triển khai tại. Điều này tương đương với webpack output.publicPath, nhưng Vue CLI cũng cần giá trị này cho các mục đích khác, vì vậy bạn nên luôn sử dụng baseUrl thay vì sửa đổi webpack output.publicPath.

Theo mặc định, Vue CLI giả sử ứng dụng của bạn sẽ được triển khai tại thư mục gốc của một tên miền, ví dụ https://www.my-app.com/. Nếu ứng dụng của bạn được triển khai ở một đường dẫn phụ, bạn sẽ cần chỉ định đường dẫn con đó bằng cách sử dụng tùy chọn này. Ví dụ: nếu ứng dụng của bạn được triển khai tại https://www.foobar.com/my-app/, hãy đặt baseUrl thành '/my-app/'.

Giá trị cũng có thể được đặt thành một chuỗi rỗng ('') hoặc một đường dẫn tương đối (./) sao cho tất cả các nội dung được liên kết bằng các đường dẫn tương đối. Điều này cho phép gói được xây dựng được triển khai dưới bất kỳ đường dẫn công cộng nào hoặc được sử dụng trong môi trường dựa trên hệ thống tệp như ứng dụng lai Cordova.
Các giới hạn của baseUrl tương đối

Tương đối baseUrl có một số hạn chế và nên tránh khi:
- Bạn đang sử dụng history.pushState định tuyến HTML5 ;
- Bạn đang sử dụng pages tùy chọn để tạo ứng dụng nhiều trang.
Giá trị này cũng được tôn trọng trong quá trình phát triển. Nếu bạn muốn máy chủ dev của bạn được phục vụ tại root thay vào đó, bạn có thể sử dụng một giá trị có điều kiện:
```
module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}
```

#outputDir

Kiểu: string
Mặc định: 'dist'

Thư mục nơi tệp build production sẽ được tạo khi chạy vue-cli-service build. Lưu ý thư mục đích sẽ bị loại bỏ trước khi xây dựng (hành vi này có thể bị vô hiệu hóa bằng cách truyền --no-clean khi xây dựng).

Gợi ý

Luôn sử dụng outputDir thay vì sửa đổi webpack output.path.

#assetsDir

Kiểu: string
Mặc định: ''

Một thư mục (liên quan đến outputDir) để lồng các nội dung tĩnh được tạo ra (js, css, img, fonts) bên dưới.

TIỀN BOA

assetsDir bị bỏ qua khi ghi đè tên tệp hoặc chunkFilename từ nội dung được tạo.

#indexPath

Kiểu: string
Mặc định: 'index.html'

Chỉ định đường dẫn đầu ra cho file được tạo ra là index.html (liên quan đến outputDir). Cũng có thể là một con đường dẫn tuyệt đối.

#filenameHashing

Kiểu: boolean
Mặc định: true

Theo mặc định, các nội dung tĩnh được tạo có chứa các hash trong tên tệp của chúng để kiểm soát bộ nhớ đệm tốt hơn. Tuy nhiên, điều này yêu cầu chỉ mục HTML được tự động tạo bởi Vue CLI. Nếu bạn không thể sử dụng chỉ mục HTML được tạo bởi Vue CLI, bạn có thể tắt tính năng băm tên tập tin bằng cách đặt tùy chọn này thành false.

#page

Kiểu: Object
Mặc định: undefined

Xây dựng app ở chế độ nhiều trang. Mỗi "trang" phải có tệp nhập JavaScript tương ứng. Giá trị phải là đối tượng trong đó khóa là tên của mục nhập và giá trị là:
- Một đối tượng chỉ định của nó entry, template, filename, title và chunks (tất cả các tùy chọn trừ entry). Bất kỳ thuộc tính nào khác được thêm vào bên cạnh các thuộc tính đó cũng sẽ được chuyển trực tiếp đến html-webpack-plugin, cho phép người dùng tùy chỉnh plugin được cho;
- Hoặc một chuỗi chỉ định entry của nó.
```
module.exports = {
  pages: {
    index: {
      // entry cho page
      entry: 'src/index/main.js',
      // source template
      template: 'public/index.html',
      // output là dist/index.html
      filename: 'index.html',
      // khi sử dụng tùy chọn title,
      // thẻ template title cần phải là <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // các phần được đưa vào trang này theo mặc định bao gồm
      // các phần phổ biến được giải nén và các phần vendor.
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // khi sử dụng định dạng chuỗi chỉ entry,
    // template được suy thành `public/subpage.html`
    // và quay lại `public/index.html` nếu không tìm thấy.
    // Tên file output được suy thành `subpage.html`.
    subpage: 'src/subpage/main.js'
  }
}
```
Gợi ý

Khi xây dựng ở chế độ nhiều trang, cấu hình webpack sẽ chứa các plugin khác nhau (sẽ có nhiều phiên bản html-webpack-plugin và preload-webpack-plugin). Đảm bảo chạy vue inspect nếu bạn đang cố sửa đổi các tùy chọn cho các plugin đó.

#lintOnSave

Kiểu: boolean | 'error'
Mặc định: true

Cho dù thực hiện lint-on-save trong quá trình phát triển bằng cách sử dụng eslint-loader, thì giá trị này chỉ có ý nghĩa khi @vue/cli-plugin-eslint được cài đặt.

Khi được đặt thành true, eslint-loader sẽ phát ra các lỗi lint dưới dạng cảnh báo. Theo mặc định, các cảnh báo chỉ được ghi vào thiết bị đầu cuối và không thực hiện quá trình biên dịch.

Để làm cho các lỗi lint hiển thị trong lớp phủ trình duyệt, bạn có thể sử dụng lintOnSave: 'error'. Điều này sẽ buộc eslint-loader phải luôn phát ra lỗi. điều này cũng có nghĩa là các lỗi lint bây giờ sẽ khiến quá trình biên dịch thất bại.

Ngoài ra, bạn có thể định cấu hình lớp phủ để hiển thị cả cảnh báo và lỗi:
```
// vue.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}
```
Khi lintOnSave là một giá trị trung thực, eslint-loader sẽ được áp dụng trong cả phiên bản development và production. Nếu bạn muốn vô hiệu hóa eslint-loader trong quá trình xây dựng bản production, bạn có thể sử dụng cấu hình sau:
```
// vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}
```

#runtimeCompiler

Kiểu: boolean
Mặc định: false

Cho dù sử dụng bản build cho Vue lõi bao gồm trình biên dịch thời gian chạy, hãy đặt nó thành true sẽ cho phép bạn sử dụng tùy chọn template trong các thành phần Vue, nhưng sẽ phải chịu thêm khoảng 10kb dung lượng cho ứng dụng của bạn.

Xem thêm: Runtime + Compiler so với Runtime.

#transpileDependencies

Kiểu: Array<string | RegExp>
Mặc định: []

Theo mặc định, babel-loader bỏ qua tất cả các tệp bên trong node_modules. Nếu bạn muốn tường minh transpile một dependency với Babel, bạn có thể liệt kê nó trong tùy chọn này.

#productionSourceMap

Kiểu: boolean
Mặc định: true

Thiết lập điều này thành false có thể tăng tốc độ xây dựng bản production nếu bạn không cần bản đồ nguồn để tạo production.

crossorigin#

Kiểu: string
Mặc định: undefined

Định cấu hình thuộc tính crossorigin trên <link rel="stylesheet"> và thẻ <script> trong HTML được tạo.

Lưu ý rằng điều này chỉ ảnh hưởng đến các thẻ được đưa vào bởi html-webpack-plugin- các thẻ được thêm trực tiếp vào mẫu nguồn ( public/index.html) không bị ảnh hưởng.

Xem thêm: Thuộc tính cài đặt CORS

integruty

Kiểu: boolean
Mặc định: false

Đặt thành true sẽ bật tính toàn vẹn của Nguồn cấp phụ (SRI) trên <link rel="stylesheet"> và thẻ <script> trong HTML được tạo. Nếu bạn đang lưu trữ các tệp được xây dựng trên CDN, bạn nên bật tính năng này để bảo mật bổ sung.

Lưu ý rằng điều này chỉ ảnh hưởng đến các thẻ được đưa vào bởi html-webpack-plugin-, các thẻ được thêm trực tiếp vào mẫu nguồn ( public/index.html) không bị ảnh hưởng.

Ngoài ra, khi SRI được bật, các gợi ý tài nguyên tải trước bị tắt do lỗi trong Chrome khiến tài nguyên được tải xuống hai lần.

#configureWebpack

Kiểu: Object | Function

Nếu giá trị là một object, nó sẽ được hợp nhất vào cấu hình cuối cùng bằng cách sử dụng webpack-merge.

Nếu giá trị là một function, nó sẽ nhận được cấu hình đã được giải quyết làm đối số. Hàm này có thể thay đổi cấu hình và trả về null, hoặc trả về phiên bản clone hoặc được sao chép của cấu hình.

Xem thêm: Làm việc với Webpack> Cấu hình đơn giản

#chainWebpack

Kiểu: Function

Một hàm sẽ nhận một thể hiện ChainableConfig được hỗ trợ bởi chuỗi webpack. Cho phép sửa đổi chi tiết hơn về cấu hình webpack nội bộ.

Xem thêm: Làm việc với Webpack> Chaining

#css.modules

Kiểu: boolean
Mặc định: false

Theo mặc định, chỉ các tệp kết thúc bằng *.module.[ext] được coi là mô-đun CSS. Thiết lập điều này thành true sẽ cho phép bạn thả các tên tệp đuôi .module và xử lý tất cả các tệp *.(css|scss|sass|less|styl(us)?) dưới dạng mô-đun CSS.

Xem thêm: Làm việc với CSS> CSS Modules

#css.extract

Kiểu: boolean | Object
Mặc định: true trong bản production, false trong bản development

Cho dù trích xuất CSS trong các thành phần của bạn thành một tệp CSS độc lập (thay vì được gạch chân trong JavaScript và được chèn động), thì điều này luôn luôn bị vô hiệu hóa khi xây dựng như các web component (kiểu được inlined và được tiêm vào shadowRoot).

Khi xây dựng như một thư viện, bạn cũng có thể thiết lập là false để tránh người dùng phải tự nhập CSS.

Việc trích xuất CSS bị tắt theo mặc định trong chế độ development vì nó không tương thích với hot reloading CSS. Tuy nhiên, bạn vẫn có thể thực thi việc trích xuất trong tất cả các trường hợp bằng cách đặt giá trị tường minh thành true.

#css.sourceMap

Kiểu: boolean
Mặc định: false

Cho dù có bật bản đồ nguồn cho CSS hay không, thì việc đặt cài đặt này thành true có thể ảnh hưởng đến hiệu suất build.

css.loaderOptions

Kiểu: Object
Mặc định: {}

Chuyển tùy chọn cho trình tải liên quan đến CSS. Ví dụ:
```
module.exports = {
  css: {
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },
      postcss: {
        // options here will be passed to postcss-loader
      }
    }
  }
}
```
Trình tải được hỗ trợ là:
Xem thêm: Chuyển tùy chọn cho trình xử lý trước bộ xử lý

Gợi ý

Điều này được ưu tiên hơn bằng cách khai thác thủ công vào các trình tải cụ thể bằng cách sử dụng chainWebpack, vì các tùy chọn này cần phải được áp dụng ở nhiều vị trí mà trình tải tương ứng được sử dụng.

#devServer

Kiểu: Object

Tất cả các tùy chọn cho webpack-dev-server được hỗ trợ. Lưu ý rằng:
- Một số giá trị như host, port và https có thể được ghi đè bằng cờ dòng lệnh.
- Một số giá trị như publicPath và historyApiFallback không nên sửa đổi khi chúng cần được đồng bộ hóa với baseUrl cho máy chủ dev hoạt động đúng.

#devServer.proxy

Kiểu: string | Object

Nếu ứng dụng giao diện người dùng của bạn và máy chủ API phụ trợ không chạy trên cùng một máy chủ, bạn sẽ cần phải yêu cầu API proxy đến máy chủ API trong quá trình phát triển. Đây là cấu hình thông qua tùy chọn devServer.proxy trong vue.config.js.

devServer.proxy có thể là một chuỗi trỏ đến máy chủ API phát triển:
```
module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}
```
Điều này sẽ cho máy chủ dev proxy bất kỳ yêu cầu không xác định nào (yêu cầu không khớp với tệp tĩnh) http://localhost:4000.

Nếu bạn muốn có nhiều quyền kiểm soát hơn đối với hành vi proxy, bạn cũng có thể sử dụng một đối tượng có path: optionscặp. Tham khảo http-proxy-middleware để biết các tùy chọn đầy đủ:
```
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}
```

#parallel

Kiểu: boolean
Mặc định: require('os').cpus().length > 1

Cho dù sử dụng thread-loader cho Babel hay TypeScript transpilation, thì parallel được kích hoạt để build production khi hệ thống có nhiều hơn 1 lõi CPU.

#pwa

Kiểu: Object

Chuyển tùy chọn cho Plugin PWA.

pluginOptions

Kiểu: Object

Đây là một đối tượng không đi qua bất kỳ xác nhận lược đồ nào, vì vậy nó có thể được sử dụng để chuyển các tùy chọn tùy ý cho các plugin của bên thứ ba. Ví dụ:
```
module.exports = {
  pluginOptions: {
    foo: {
      // các plugin có thể truy cập các tùy chọn này như
      // `options.pluginOptions.foo`.
    }
  }
}
```

Babel

Babel có thể được cấu hình thông qua babel.config.js.

Gợi ý

Vue CLI sử dụng babel.config.js định dạng cấu hình mới trong Babel 7. Không giống như .babelrc hoặc trường babel trong package.json, tệp cấu hình này không sử dụng độ phân giải dựa trên tệp và được áp dụng nhất quán cho bất kỳ tệp nào trong dự án gốc, bao gồm cả các phụ thuộc bên trong node_modules. Bạn nên luôn sử dụng babel.config.js thay vì các định dạng khác trong các dự án Vue CLI.

Tất cả các ứng dụng Vue CLI sử dụng @vue/babel-preset-app, bao gồm babel-preset-env, hỗ trợ JSX và cấu hình được tối ưu hóa cho chi phí kích thước gói tối thiểu. Xem tài liệu để biết chi tiết và các tùy chọn đặt trước.

Xem thêm phần Polyfills trong phần hướng dẫn.