VueJS: Tham khảo cấu hình
Giải phóng thời gian, khai phóng năng lực
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ụngbaseUrl
thay vì sửa đổi webpackoutput.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ạihttps://www.foobar.com/my-app/
, hãy đặtbaseUrl
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 đếnoutputDir
). 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 đếnhtml-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ạyvue inspect
nếu bạn đang cố sửa đổi các tùy chọn cho các plugin đó. - Một đối tượng chỉ định của nó
#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ộceslint-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óaeslint-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ọntemplate
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 trongnode_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ànhtrue
sẽ cho phép bạn thả.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 developmentCho 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
trongvue.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: options
cặ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ườngbabel
trongpackage.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 trongnode_modules
. Bạn nên luôn sử dụngbabel.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.
#ESLint
ESLint có thể được cấu hình thông qua .eslintrc
hoặc trường eslintConfig
trong package.json
.
Xem @vu /cli-plugin-eslint để biết thêm chi tiết.
#TypeScript
TypeScript có thể được cấu hình thông qua tsconfig.json
.
Xem @vue/cli-plugin-typescript để biết thêm chi tiết.
Kiểm tra Đơn vị
#Jest
Xem @vue/cli-plugin-unit-jest để biết thêm chi tiết.
Mocha (qua mocha-webpack)
Xem @vue/cli-plugin-unit-mocha để biết thêm chi tiết.
Thử nghiệm E2E
#Cypress
Xem @vue/cli-plugin-e2e-cypress để biết thêm chi tiết.
Nightwatch
Xem @vue/cli-plugin-e2e-nightwatch để biết thêm chi tiết.
Giải phóng thời gian, khai phóng năng lực