Vue CLI deployment

A general guide

If you use the Vue CLI to work with static resources and work with the back-end framework as part of your deployment, all you need is to make sure that the build files generated by the Vue CLI are in the right place and that the back-end framework is published.

If you deploy a front-end app independently of the back end -- that is, the back end exposes a front-end accessible API -- then the front end is actually a purely static app. Then you can deploy the content built in the dist directory to any static file server, but make sure that the publicPath is correct.

Local preview

The dist directory needs to start an HTTP server to access (unless you have configured publicPath as a relative value), so opening dist/index.html directly with the file:// protocol does not work. The easiest way to build a production environment in a local preview is to use a node .js a static file server, such as serve:

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

Routes that use history.pushState

If you use Vue Router in history mode, you can't match a simple static file server. For example, if you use Vue Router to define a route for /todos/42/, the development server has configured the appropriate localhost:3000/todos/42 response, but a simple static server built for the production environment will return 404.

To solve this problem, you need to configure the production environment server to roll back any requests that do not match the static file to the index .html. Vue Router's documentation provides guidelines for common server configurations.

CORS

If the front-end static content is deployed on a domain name that is different from the back-end API, you need to configure CORS appropriately.

PWA

If you use a PWA plug-in, the app must be set up on HTTPS for the Service Worker to be properly registered.

Platform guide

GitHub Pages

Push updates manually

1. Set the correct publicPath .js vue.config. I f you plan to deploy your project to https://www.userNAME.github.io/, publicPath will default to "/", and you can ignore this parameter. I f you plan to deploy your project to https://www.userNAME.github.io/?lt;REPO>/ (i.e., the warehouse address is https://github.com/<USERNAME>/<REPO>), you can set Path public to "/lt;REPO>/". F or example, if the warehouse name is "my-project", then the contents of the vue.config.js should look like this: module.exports . . . publicPath: process.env.NODE_ENV . ' /my-project/' : '/' }
2. In the project directory, create the following deploy.sh (which can be properly uncommented) and run it for deployment: s!/usr/bin/env sh s www.example.com h s CNAME git init git add -A git commit -m 'deploy' s deployed to https://www.userNAME>.github.io s/git push-f [email protected]:?lt;USERNAME>?lt USERNAME>.github.io.git master?deployed to https://twitter.com/userNAME g ithub.io/<REPO> # git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages cd -

Use Travis CI to automatically update

1. Follow the example above in the vue.config .js set the correct publicPath.
2. Install the Travis CLI client: gem install travis and travis --login
3. Build a GitHub access token with "repo" permissions.
4. Grant Travis access to the repository: travis set GITHUB_TOKEN xxx (xxx is the personal access token in the third step)
5. Create a .travis.yml file at the root of the project. l anguage: node_js node_js: - "node" cache: npm script: npm run build deploy: provider: pages skip_cleanup: true github_token: $GITHUB_TOKEN local_dir: dist on: branch: master
6. Push the .travis.yml file to the repository to trigger the first build.

GitLab Pages

According to the description in the GitLab Pages documentation, all configurations are in the .gitlab-ci.yml file in the root. The following example is a good place to get started:

# .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

Typically, your static page will be hosted on https://yourUserName.gitlab.io/yourProjectName, so you can create an initial vue.config .js file to update the value BASE_URL to match:

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

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

Read the documentation at GitLab Pages domains to learn more about page deployment URLs. Note that you can also use a custom domain name.

Submit the .gitlab-ci.yml and vue.config files before pushing .js repository. GitLab CI's pipeline will be triggered: When successful, go to Settings and Pages to see links to websites.

Netlify

1. On Netlify, create a new project from GitHub using the following settings: Build command: npm run build or yarn build publishing directory: dist
2. Click the "deploy" button!

You can also view vue-cli-plugin-netlify-lambda.

If you use Vue Router's history mode, you need to create a file in the /public directory _redirects file:

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

For more information, check out the Netlify redirect documentation.

Render

Render offers a free static site hosting service with fully managed SSL, global CDNs, and GitHub continuous automatic deployments.

1. Create a new web service on Render and grant Render's GitHub app access to your Vue repository.
2. Use the following settings during creation: Environment: Static Site Build Command: npm build run or yarn build publishing directory: dist

Home and dry! At the end of the build, your app will be online on your Render URL.

If you use Vue Router's history mode, you'll need to add the following override rules to your site's Redirects/Rewrites settings:

• Source: /*
• Destination: /index.html
• Status: Rewrite

For more information, check out Render's Redirect and Overwrite and Custom Domain Name documentation.

Amazon S3

See vue-cli-plugin-s3-deploy.

Firebase

Create a new Firebase project Firebase console. Refer to the documentation.

Make sure that firebase-tools is installed globally:

npm install -g firebase-tools

At the root of the project, initialize firebase with the following command:

firebase init

Firebase will ask some questions about the initialization project.

• Choose the features that require the Firebase CLI. Be sure to choose hosting.
• Select the default Firebase project.
• Setting the public directory to dist (or where the output is built) will be uploaded to Firebase Hosting.

// firebase.json

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

• Select yes to set the item to a single-page app. This creates an index .html in the dist folder and configures the hosting information.

// firebase.json

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

Perform the npm run build to build the project.

In the Firebase Hosting deployment project, perform the following commands:

firebase deploy --only hosting

If additional Firebase CLI features are required for use in the deployed project, perform firebase deploy to remove the --only parameter.

You can now visit your project at https://your-PROJECT-ID.com.firebaseapp.

Please refer to the Firebase documentation for more details.

ZEIT Now

ZEIT Now is a website and serverless API cloud platform where you can deploy your Vue project using your personal domain name (or free .now.sh URL).

Step 1: Install the Now CLI

To install its command-line interface using npm, run the following command:

npm install -g now

Step 2: Deploy

Run the following commands at the project root to deploy your app:

now

You can also use their GitHub or GitLab integration services.

Home and dry!

Your site will start deploying and you'll get a link that https://vue.now-examples.now.sh/ a file.

Out of the box, the request is automatically overwrite to the index .html (except for custom static files) with the appropriate cache request header. You can rewrite these rules.

Stdlib

The | Welcome to contribute.

Heroku

1. Install the Heroku CLI
2. Create a static.json file: "root": "dist", "clean_urls": true, "routes": "/": "index.html"
3. Add static.json to Gitgit add static.json git commit -m "add static configuration"
4. Deployed to Herokuheroku login heroku create heroku buildpacks: add heroku/nodejs heroku buildpacks: add https://github.com/heroku/heroku-buildpack-static git push heroku master

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

Surge

To deploy with Surge, the steps are simple.

First, build the project by running the npm run build. If you don't have Surge's command-line tools installed yet, you can do so by running commands:

npm install --global surge

Then cd goes to the item's dist/folder, then runs the surge and follows the on-screen prompts. I f you're using Surge for the first time, it will require an email and password. Confirm the project folder and enter your preferred domain to view the items being deployed, as shown below.

            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

By accessing myawesomeproject.surge.sh to ensure that your project has been successfully published with Surge, more settings details about custom domain names, etc. can be viewed at Surge's help page.

Bitbucket Cloud

1. For example, the Bitbucket document creates a repository named .lt;USERNAME>bitbucket.io.
2. If you want to own more than one site, you want to publish to a sub-folder in the main repository. I n this case, publicPath will be set .js vue.config. I f you deploy to https://lt;USERNAME.io/, publicPath defaults to "/", you can choose to ignore it. I f you want to deploy to https://lt;USERNAME>.bitbucket.io/?lt;SUBFOLDER>/, set publicPath to "/lt;SUBFOLDER>/". In this case, the directory structure of the warehouse should reflect the url structure, for example, the warehouse should have a directory of /-lt;SUBFOLDER.gt;
3. In the project, deploy.sh to create and run it for deployment using the following: s!/usr/bin/env sh sh s add -A git commit -m 'deploy' git push -f [email protected]:

Docker (Nginx)

Use Nginx to deploy your app in a Docker container.

1. Install Docker
2. Create dockerfile file FROM node: 10 COPY./ /app WORKDIR /app RUN npm install and samp; npm run build FROM nginx RUN mkdir /app COPY --0 /app/dist/app COPY nginx.conf/etc/nginx/nginx.conf
3. Creating a .dockerignore file settings .dockerignore file at the root of the project prevents node_modules and other intermediate build products from being copied into the mirror causing build problems. * */node_modules **/dist
4. Creating nginx.conf file Nginx at the root of the project is an HTTP(s) server that can run in a Docker container. I t uses profiles to determine how to provide content, ports to listen to, and so on. S ee the Nginx settings documentation for all possible settings options. H ere's a simple Nginx setup file that will provide your Vue project on port 80. T he page did not find / 404 error using the index .html, which allows us to use pushState()-based routing. u ser nginx; w orker_processes 1; e rror_log /var/log/nginx/error.log warn; p id /var/run/nginx.pid; e vents { worker_connections 1024; } http { include /etc/nginx/mime.types; d efault_type application/octet-stream; l og_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; a ccess_log /var/log/nginx/access.log main; s endfile on; k eepalive_timeout 65; s erver { listen 80; s erver_name localhost; l ocation / { root /app; i ndex index.html; t ry_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; l ocation = /50x.html { root /usr/share/nginx/html; } } }
5. Build your Docker mirror docker build . - t my-app # Sending build context to Docker daemon 884.7kB # ... # Successfully built 4b00e5ee82ae # Successfully tagged my-app:latest
6. The example of running your Docker mirror is based on the official Nginx mirror, so log redirection has been set and the self-daemon process has been turned off. I t also provides other default settings that help Nginx run in docker containers. F or more information, see Nginx Docker Warehouse. d ocker run -d -p 8080:80 my-app curl localhost:8080 # <! D OCTYPE html><html lang=en>... </html>