Solving Two Major Pain Points with Vue CLI and Node.js

Web Technologies
1

Solving Two Major Pain Points with Vue CLI and Node.js

In the world of front-end frameworks, React and Angular have long been the dominant players. However, with the rise of new frameworks, Vue has emerged as a formidable competitor, surpassing React in GitHub stars and showing no signs of slowing down. One of the key features that sets Vue apart is its official CLI tool, Vue CLI, which provides a robust scaffolding for developing new applications.

Addressing the First Pain Point: Routing History Mode

When building a Vue application, one of the first challenges developers face is setting up the routing system. Vue Router provides two modes: hash and history. While both modes have their advantages, the history mode is often preferred for its clean and intuitive URL structure. However, when deploying a Vue application, the history mode can cause issues with URL resolution.

The Problem with History Mode

When a Vue application is deployed, the browser’s URL may not be updated correctly, leading to a “page not found” error. This is because the URL does not match any static resources, causing the browser to request the wrong page. To solve this issue, we need to configure the server to rewrite the URL, pointing to the app’s index.html file.

Solution: Configuring the Server with connect-history-api-fallback

To solve this problem, we can use the connect-history-api-fallback middleware, which allows us to configure the server to rewrite the URL. Here are the steps to implement this solution:

  1. Install the required dependency: connect-history-api-fallback
  2. Update the server.js file to include the following code:
const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

app.use(history({
  // index: "index.html", -> index attribute default value is pointing to index.html
  htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
}));

app.use(express.static(__dirname + "/dist"));

app.listen(80, function() {
  console.log("success");
});

Addressing the Second Pain Point: Proxying Cross-Domain Requests

When building a Vue application, we often need to make cross-domain requests to fetch data from external APIs. Vue CLI provides a built-in proxy feature that allows us to configure the development server to proxy requests to a specific URL. However, when deploying the application, the proxy feature is not enabled by default, causing issues with cross-domain requests.

The Problem with Proxying Cross-Domain Requests

When a Vue application is deployed, the proxy feature is not enabled by default, causing issues with cross-domain requests. To solve this issue, we need to implement a proxy in the production environment using Node.js.

Solution: Implementing a Proxy in the Production Environment

To solve this problem, we can use the http-proxy-middleware package to implement a proxy in the production environment. Here are the steps to implement this solution:

  1. Install the required dependency: http-proxy-middleware
  2. Update the server.js file to include the following code:
const express = require('express');
const proxy = require('http-proxy-middleware');
const app = express();

app.use('^/zhang', proxy({
  target: 'http://www.zhangpeiyue.com',
  changeOrigin: true,
  pathRewrite: { '^/zhang': '/' }
}));

app.use(express.static(__dirname + "/dist"));

app.listen(80, function() {
  console.log("success");
});

By implementing these solutions, we can address two major pain points when building a Vue application: routing history mode and proxying cross-domain requests. By using Vue CLI and Node.js, we can create a robust and scalable application that meets the needs of modern web development.