Departamento CLI de Vue

Reglas generales

Si usa la CLI de Vue para procesar recursos estáticos y la usa con el marco de back-end como parte de la implementación, entonces todo lo que necesita hacer es asegurarse de que los archivos de compilación generados por la CLI de Vue estén en la ubicación correcta y seguir la forma en que el backend se publica el marco.

Si implementa la aplicación de front-end independientemente del back-end, es decir, el back-end expone una API a la que puede acceder el front-end, entonces el front-end es efectivamente una aplicación puramente estática. Luego, puede implementar el contenido creado en el directorio dist en cualquier servidor de archivos estático, pero asegúrese de que publicPath sea correcto .

vista previa local

El directorio dist necesita iniciar un servidor HTTP para acceder (a menos que haya configurado publicPath en un valor relativo), por lo que abrir dist/index.html directamente con el protocolo file:// no funcionará. La forma más fácil de obtener una vista previa de las compilaciones de producción localmente es usar un servidor de archivos estático Node.js como serve :

npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist

Enrutamiento usando history.pushState

Si usa Vue Router en modo historial, no se puede usar con un servidor de archivos estático simple. Por ejemplo, si define una ruta para /todos/42/ usando Vue Router, el servidor de desarrollo ya está configurado para responder a localhost:3000/todos/42 , pero un servidor estático simple creado para producción devolverá 404.

Para solucionar esto, debe configurar su servidor de producción para que recurra a index.html para cualquier solicitud que no coincida con ningún archivo estático. La documentación de Vue Router proporciona pautas comunes de configuración del servidor .

CORS

Si el contenido estático de front-end se implementa en un dominio diferente al de la API de back-end, debe configurar CORS adecuadamente .

PWA

Si usa el complemento PWA, la aplicación debe estar alojada en HTTPS para que el Service Worker pueda registrarse correctamente.

Guía de plataforma

Páginas de GitHub

Empuje las actualizaciones manualmente

Establezca el publicPath correcto en vue.config.js. Si tiene la intención de implementar el proyecto en https://<USERNAME>.github.io/, publicPath se establecerá en "/" de forma predeterminada, puede ignorar este parámetro. Si planea implementar el proyecto en https://<NOMBRE DE USUARIO>.github.io/<REPO>/ (es decir, la dirección del almacén es https://github.com/<NOMBRE DE USUARIO>/<REPO>), puede establecer publicPath en "/<REPO>/". Por ejemplo, si el nombre del almacén es "my-project", entonces el contenido de vue.config.js debería ser el siguiente: module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my - proyecto/' : '/' }
En el directorio del proyecto, cree un archivo deployment.sh con el siguiente contenido (se puede descomentar apropiadamente) y ejecútelo para implementarlo: #!/usr/bin/env sh # abort script on error set -e # build npm run build # cd para crear el directorio de salida cd dist # Implementar en un nombre de dominio personalizado # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # Implementar en https://<USERNAME>.github.io # git push -f [email protected]:<NOMBRE DE USUARIO>/<NOMBRE DE USUARIO>.github.io.git master # Implementar en https://<NOMBRE DE USUARIO>.github.io/<REPO> # git push -f git@ github.com:<NOMBRE DE USUARIO>/<REPO>.git master:gh-pages cd -

Actualizaciones automáticas usando Travis CI

Establezca el publicPath correcto en vue.config.js como se indicó anteriormente.
Instale el cliente Travis CLI: gem install travis && travis --login
Genere un token de acceso de GitHub con permisos de "repo" .
Otorgue a Travis acceso al repositorio: travis set GITHUB_TOKEN=xxx (xxx es el token de acceso personal del paso 3)
Cree un archivo .travis.yml en el directorio raíz del proyecto. idioma: node_js node_js: - "node" caché: npm script: npm run build deployment: proveedor: páginas skip_cleanup: true github_token: $GITHUB_TOKEN local_dir: dist on: branch: master
Empuje el archivo .travis.yml al repositorio para activar la primera compilación.

Páginas de GitLab

De acuerdo con la documentación de GitLab Pages, toda la configuración está en el archivo .gitlab-ci.yml en el directorio raíz. El siguiente ejemplo es un buen lugar para comenzar:

# .gitlab-ci.yml 文件应放在你仓库的根目录下 

pages: # 必须定义一个名为 pages 的 job
  image: node:latest
  stage: deploy
  script:
    - npm ci
    - npm run build
    - mv public public-vue # GitLab Pages 的钩子设置在 public 文件夹
    - mv dist public # 重命名 dist 文件夹 (npm run build 之后的输出位置)
  artifacts:
    paths:
      - public # artifact path 一定要在 /public , 这样 GitLab Pages 才能获取
  only:
    - master

Por lo general, sus páginas estáticas se alojarán en https://yourUserName.gitlab.io/yourProjectName, por lo que puede crear un archivo vue.config.js inicial para actualizar el valor de BASE_URL para que coincida:

// vue.config.js 位于仓库的根目录下
// 确保用 GitLab 项目的名称替换了 `YourProjectName`

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/yourProjectName/'
    : '/'
}

Lea la documentación sobre los dominios de GitLab Pages para obtener más información sobre las URL de implementación de páginas. Tenga en cuenta que también puede utilizar un nombre de dominio personalizado .

Confirme los archivos .gitlab-ci.yml y vue.config.js antes de enviarlos al repositorio. Se activará la canalización de CI de GitLab: cuando tenga éxito, vaya a Configuración > Páginas para ver el enlace en el sitio web.

netlizar

En Netlify, cree un nuevo proyecto desde GitHub con la siguiente configuración: Comando de compilación: npm run build o yarn build Directorio de publicación: dist
¡Haz clic en el botón "implementar"!

Consulte también vue-cli-plugin-netlify-lambda .

Si usa el modo de historial de Vue Router, debe crear un archivo _redirects en el directorio /public:

# 单页应用的 Netlify 设置
/*    /index.html   200

Consulte la documentación de redirección de Netlify para obtener más información .

Prestar

Render ofrece hospedaje de sitio estático gratuito con SSL completamente administrado, CDN global y autoimplementación continua desde GitHub .

Cree un nuevo servicio web en Render y otorgue acceso a la aplicación GitHub de Render a su repositorio de Vue.
Utilice la siguiente configuración durante la creación: Entorno: Sitio estático Comando de compilación: npm run build o yarn build Directorio de publicación: dist

¡Ya terminaste! Al final de la compilación, su aplicación estará activa en su URL de procesamiento.

Si usa el modo de historial de Vue Router, debe agregar las siguientes reglas de reescritura a la configuración de Redirecciones/Reescrituras de su sitio:

Fuente: /*
Destino: /index.html
Estado: Reescribir

Consulte Redirección y reescritura de Render y documentación de dominio personalizado para obtener más detalles .

Amazonas S3

Consulte vue-cli-plugin-s3-deploy .

base de fuego

Cree un nuevo proyecto de Firebase Consola de Firebase . Consulte la documentación .

Asegúrese de haber instalado firebase-tools globalmente :

npm install -g firebase-tools

En el directorio raíz del proyecto, inicialice firebase con el siguiente comando:

firebase init

Firebase le hará algunas preguntas sobre cómo inicializar el proyecto.

Selecciona Funciones que requieren Firebase CLI. Asegúrese de seleccionar alojamiento.
Elija el proyecto predeterminado de Firebase.
Establezca el directorio público en dist (o la ubicación del resultado de la compilación) que se cargará en Firebase Hosting.

// firebase.json

{
  "hosting": {
    "public": "dist"
  }
}

Seleccione sí para configurar el proyecto como una aplicación de una sola página. Esto creará un index.html en la carpeta dist y configurará la información de alojamiento.

// firebase.json

{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Ejecute npm run build para compilar el proyecto.

Para implementar el proyecto en Firebase Hosting, ejecute el siguiente comando:

firebase deploy --only hosting

Para usar la funcionalidad adicional de Firebase CLI en un proyecto implementado, ejecuta firebase deployment sin el argumento --only.

Ahora se puede acceder a su proyecto en https://<YOUR-PROJECT-ID>.firebaseapp.com.

Consulte la documentación de Firebase para obtener más detalles.

Ahora

ZEIT Now es un sitio web y una plataforma de nube API sin servidor (Serverless), puede usar su nombre de dominio personal (o URL .now.sh gratuita) para implementar su proyecto Vue.

Paso 1: Instalar ahora CLI

Para instalar su interfaz de línea de comandos usando npm , ejecute el siguiente comando:

npm install -g now

Paso 2: implementar

Ejecute el siguiente comando en el directorio raíz del proyecto para implementar su aplicación:

now

Además, puede usar sus servicios de integración GitHub o GitLab .

¡Ya terminaste!

Su sitio comenzará a implementarse y obtendrá un enlace como https://vue.now-examples.now.sh/ .

Fuera de la caja, las solicitudes se reescriben automáticamente en index.html (excepto los archivos estáticos personalizados) con los encabezados de almacenamiento en caché adecuados. Puede anular estas reglas.

Stdlib

Incompleto | Las contribuciones son bienvenidas.

Heroku

Instalar la CLI de Heroku
创建 static.json 文件：{ "root": "dist", "clean_urls": true, "routes": { "/**": "index.html" } }
将 static.json 加入 Gitgit agregar static.json git commit -m "agregar configuración estática"
Heroku heroku iniciar sesión heroku crear heroku buildpacks: agregar heroku/nodejs heroku buildpacks: agregar https://github.com/heroku/heroku-buildpack-static git push heroku master

Detalles: https://gist.github.com/hone/24b06869b4c1eca701f9

Aumento

Para desplegar con Surge , los pasos son muy sencillos.

Primero, compila el proyecto ejecutando npm run build . Si aún no tiene instaladas las herramientas de línea de comandos de Surge, puede hacerlo ejecutando el comando:

npm install --global surge

Luego haga cd en la carpeta dist/ del proyecto, luego ejecute surge y siga las indicaciones en pantalla. Si usa Surge por primera vez, le pedirá que configure un correo electrónico y una contraseña. Confirme la carpeta del proyecto e ingrese el dominio preferido para ver cómo se implementa el proyecto como se muestra a continuación.

            project: /Users/user/Documents/myawesomeproject/dist/
         domain: myawesomeproject.surge.sh
         upload: [====================] 100% eta: 0.0s (31 files, 494256 bytes)
            CDN: [====================] 100%
             IP: **.**.***.***

   Success! - Published to myawesomeproject.surge.sh

Asegúrese de que su proyecto se haya publicado correctamente con Surge visitando myawesomeproject.surge.sh. Para obtener información más detallada sobre los nombres de dominio personalizados y otras configuraciones, puede visitar la página de ayuda de Surge .

Nube de Bitbucket

Cree un repositorio llamado <NOMBRE DE USUARIO>.bitbucket.io según la documentación de Bitbucket .
Si desea tener varios sitios web, desea publicar en una subcarpeta del repositorio principal. En este caso, configure publicPath en vue.config.js. Si se implementa en https://<NOMBRE DE USUARIO>.bitbucket.io/, publicPath se establecerá en "/" de forma predeterminada, puede optar por ignorarlo. Si desea realizar la implementación en https://<NOMBRE DE USUARIO>.bitbucket.io/<SUBCARPETA>/, establezca publicPath en "/<SUBCARPETA>/". En este caso, la estructura de directorios del repositorio debe reflejar la estructura de la URL, por ejemplo, el repositorio debe tener un directorio /<SUBFIDE>.
En el proyecto, cree un deployment.sh con el siguiente contenido y ejecútelo para implementar: #!/usr/bin/env sh # anule el script cuando ocurra un error set -e # build npm run build # cd en el directorio de la salida de compilación cd dist git init git add -A git commit -m 'deploy' git push -f [email protected]:<USERNAME>/<USERNAME>.bitbucket.io.git master cd -

Ventana acoplable (Nginx)

Implemente su aplicación usando Nginx en un contenedor Docker.

Instalar ventana acoplable
Cree un archivo Dockerfile en el directorio raíz del proyecto DESDE el nodo: 10 COPY ./ /app WORKDIR /app RUN npm install && npm run build FROM nginx RUN mkdir /app COPY --from=0 /app/dist /app COPY nginx.conf /etc /nginx/nginx.conf
Cree un archivo .dockerignore en el directorio raíz del proyecto. Establecer el archivo .dockerignore puede evitar que node_modules y otros productos de compilación intermedios se copien en la imagen y causen problemas de compilación. **/node_modules**/dist
Cree el archivo nginx.conf en el directorio raíz del proyecto. Nginx es un servidor HTTP(s) que puede ejecutarse en un contenedor Docker. Utiliza archivos de configuración para decidir cómo servir contenido, en qué puertos escuchar, etc. Consulte la documentación de configuración de Nginx para conocer todas las opciones de configuración posibles. A continuación se muestra un archivo de configuración de Nginx simple que servirá a su proyecto Vue en el puerto 80. Los errores de página no encontrada/404 usan index.html, lo que nos permite usar el enrutamiento basado en pushState(). usuario nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/ octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/ access.log main; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { root /app; index index.html; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x .html; ubicación = /50x.html { raíz /usr/share/nginx/html; } } }
Cree su imagen de Docker docker build . -t my-app # Enviando el contexto de compilación al daemon de Docker 884.7kB # ... # Construido con éxito 4b00e5ee82ae # Etiquetado con éxito my-app:latest
Ejecución de la imagen de Docker Este ejemplo se basa en la imagen oficial de Nginx, por lo que la redirección de registros ya está configurada y el autodemonio está desactivado. También proporciona otras configuraciones predeterminadas que son beneficiosas para que Nginx se ejecute en contenedores Docker. Consulte el repositorio de Nginx Docker para obtener más información . docker run -d -p 8080:80 mi-aplicación curl localhost:8080 # <!DOCTYPE html><html lang=en>...</html>