Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Production Deployment Guide [DONE] #36

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 24 additions & 23 deletions src/v2/guide/deployment.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
title: Production Deployment
title: Implementarea Producției
type: guide
order: 401
---

## Turn on Production Mode
## Activați Modul de Producție

During development, Vue provides a lot of warnings to help you with common errors and pitfalls. However, these warning strings become useless in production and bloat your app's payload size. In addition, some of these warning checks have small runtime costs that can be avoided in production mode.
În timpul dezvoltării, Vue oferă multe avertismente pentru a vă ajuta cu erorile și capcanele comune. Cu toate acestea, aceste șiruri de avertizare devin inutile în producție și umflă dimensiunea greutăților încărcate de aplicația dvs. În plus, unele dintre aceste verificări de avertizare au costuri mici de executare care pot fi evitate în modul de producție.

### Without Build Tools
### Fără Instrumente de Construcție

If you are using the full build, i.e. directly including Vue via a script tag without a build tool, make sure to use the minified version (`vue.min.js`) for production. Both versions can be found in the [Installation guide](installation.html#Direct-lt-script-gt-Include).
Dacă utilizați construirea completă, adică direct incluzând Vue printr-o etichetă de script fără un instrument de construire, asigurați-vă că utilizați versiunea minificată (`vue.min.js`) pentru producție. Ambele versiuni pot fi găsite în [Installation guide](installation.html#Direct-lt-script-gt-Include).

### With Build Tools
### cu Instrumente de Construcție

When using a build tool like Webpack or Browserify, the production mode will be determined by `process.env.NODE_ENV` inside Vue's source code, and it will be in development mode by default. Both build tools provide ways to overwrite this variable to enable Vue's production mode, and warnings will be stripped by minifiers during the build. All `vue-cli` templates have these pre-configured for you, but it would be beneficial to know how it is done:
Când se utilizează un instrument de construcție cum ar fi Webpack sau Browserify, modul de producție va fi determinat de `process.env.NODE_ENV` în codul sursă Vue și va fi în mod implicit în modul de dezvoltare. Ambele instrumente de construire oferă modalități de suprascriere a acestei variabile pentru a permite modul de producție al Vue, iar avertismentele vor fi eliminate de minifiere în timpul construcției. Toate șabloanele `vue-cli` au aceste preconfigurate pentru dvs., dar ar fi benefic să știți cum se face:

#### Webpack

Use Webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) to indicate a production environment, so that warning blocks can be automatically dropped by UglifyJS during minification. Example config:
Utilizați [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) de la Webpack pentru a indica un mediu de producție, astfel încât blocurile de avertizare să poată fi abandonate automat de UglifyJS în timpul procesului de minificare. Exemplu config:

``` js
var webpack = require('webpack')
Expand All @@ -38,9 +38,9 @@ module.exports = {

#### Browserify

- Run your bundling command with the actual `NODE_ENV` environment variable set to `"production"`. This tells `vueify` to avoid including hot-reload and development related code.
- Rulați comanda de îmbinare cu variabila actuală de mediu "NODE_ENV" setată la `"producție"`. Acest lucru spune `vueify` pentru a evita includerea reîncărcării-hot și a codului de dezvoltare.

- Apply a global [envify](https://github.com/hughsk/envify) transform to your bundle. This allows the minifier to strip out all the warnings in Vue's source code wrapped in env variable conditional blocks. For example:
- Aplicați o transformare globală [envify](https://github.com/hughsk/envify) în pachetul dvs. Aceasta permite minifierului să elimine toate avertismentele din codul sursă al Vue înfășurat în blocuri condiționale variabile env. De exemplu:

``` bash
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
Expand All @@ -49,13 +49,13 @@ module.exports = {
- Or, using [envify](https://github.com/hughsk/envify) with Gulp:

``` js
// Use the envify custom module to specify environment variables
// Utilizați modulul personalizat pentru a specifica variabilele de mediu
var envify = require('envify/custom')

browserify(browserifyOptions)
.transform(vueify),
.transform(
// Required in order to process node_modules files
// Obligatoriu pentru procesarea fișierelor node_modules
{ global: true },
envify({ NODE_ENV: 'production' })
)
Expand All @@ -64,7 +64,7 @@ module.exports = {

#### Rollup

Use [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace):
Utilizează [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace):

``` js
const replace = require('rollup-plugin-replace')
Expand All @@ -79,24 +79,25 @@ rollup({
}).then(...)
```

## Pre-Compiling Templates
## Șabloane de Precompilare

When using in-DOM templates or in-JavaScript template strings, the template-to-render-function compilation is performed on the fly. This is usually fast enough in most cases, but is best avoided if your application is performance-sensitive.
Atunci când se utilizează șabloane in-DOM sau șiruri de șabloane în JavaScript, compilația funcțiilor șablon-redare se efectuează în zbor. De obicei, acest lucru este destul de rapid în cele mai multe cazuri, dar este cel mai bine evitat dacă aplicația dvs. este sensibilă la performanță.

The easiest way to pre-compile templates is using [Single-File Components](single-file-components.html) - the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.
Cea mai simplă metodă de precompilare a șabloanelor este utilizarea [Componentelor Single-File](single-file-components.html) - setările asociate de construire realizează automat o precompilare pentru dvs., astfel încât codul construit conține funcțiile de redare deja compilate, în loc de șabloane de șiruri neprelucrate.

If you are using Webpack, and prefer separating JavaScript and template files, you can use [vue-template-loader](https://github.com/ktsn/vue-template-loader), which also transforms the template files into JavaScript render functions during the build step.
Dacă utilizați Webpack și preferați să separați JavaScript și fișierele de șablon, puteți utiliza [vue-template-loader](https://github.com/ktsn/vue-template-loader), care transformă, de asemenea, fișierele șablon în funcții de randare JavaScript în timpul etapei de construire.

## Extracting Component CSS

When using Single-File Components, the CSS inside components are injected dynamically as `<style>` tags via JavaScript. This has a small runtime cost, and if you are using server-side rendering it will cause a "flash of unstyled content". Extracting the CSS across all components into the same file will avoid these issues, and also result in better CSS minification and caching.
## Extragerea Сomponentei CSS

Refer to the respective build tool documentations to see how it's done:
Când se utilizează Componentele cu un singur fișier, componentele CSS din interiorul acestora sunt injectate dinamic ca etichete `<style>` prin JavaScript. Acest lucru are un cost redus de execuție și, dacă utilizați randarea de pe server, acesta va provoca o "blițare a conținutului neuniform". Extragerea CSS în toate componentele în același fișier va evita aceste probleme și va duce, de asemenea, la îmbunătățirea miniaturilor și cache-urilor CSS.

- [Webpack + vue-loader](https://vue-loader.vuejs.org/en/configurations/extract-css.html) (the `vue-cli` webpack template has this pre-configured)
Consultați documentațiile respectivului instrument de construcție pentru a vedea cum se face:

- [Webpack + vue-loader](https://vue-loader.vuejs.org/en/configurations/extract-css.html) (șablonul webpack `vue-cli` are acestă preconfigurare)
- [Browserify + vueify](https://github.com/vuejs/vueify#css-extraction)
- [Rollup + rollup-plugin-vue](https://vuejs.github.io/rollup-plugin-vue/#/en/2.3/?id=custom-handler)

## Tracking Runtime Errors
## Urmărirea Erorilor de Execuție

If a runtime error occurs during a component's render, it will be passed to the global `Vue.config.errorHandler` config function if it has been set. It might be a good idea to leverage this hook together with an error-tracking service like [Sentry](https://sentry.io), which provides [an official integration](https://sentry.io/for/vue/) for Vue.
Dacă se produce o eroare de execuție în timpul redării unei componente, aceasta va fi trecută la funcția de configurare globală `Vue.config.errorHandler` dacă aceasta a fost setată. Ar putea fi o idee bună să folosiți acest cârlig împreună cu un serviciu de urmărire a erorilor, cum ar fi [Sentry](https://sentry.io), care oferă [o integrare oficială](https://sentry.io/for/vue/) pentru Vue.