Vite proxying with https doesn't work
  • 24-May-2023
Lightrun Team
Author Lightrun Team
Vite proxying with https doesn't work

Vite proxying with https doesn’t work

Lightrun Team
Lightrun Team

Explanation of the problem


The bug occurs when migrating an existing project from vue-cli to vite. The project has a vue-cli front-end and a back-end that only accepts secure HTTPS requests. A wildcard certificate for * is used, and developers have updated their etc/hosts file to redirect the local URL to This is necessary because the back-end only accepts HTTPS requests.

In the original vue.config.js file, all requests starting with “/” are proxied to the back-end server using http-proxy-middleware. This configuration worked fine with vue-cli, but when migrating to vite, proxying to the back-end server stopped working.

The corresponding vite.config.js file has been modified to use environment variables starting with “VUE_” and includes changes to the proxy configuration. However, the proxying functionality still doesn’t work.


Troubleshooting with the Lightrun Developer Observability Platform


Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: Vite proxying with https doesn’t work


  1. Update the vite.config.js file to properly configure the dev server and proxy settings. Make sure to replace the existing configuration with the following code:


import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://localhost:8447',
        changeOrigin: true,
        secure: false,
        ws: true


  1. In the main.js file, update the axios base URL configuration to match the proxy path. Replace the existing code with the following:


import axios from 'axios'

if (import.meta.env.DEV) {
  axios.defaults.baseURL = '/api'


  1. Verify that the necessary environment variables are set correctly. Check the .env file and ensure that the variables VUE_ENV_HOST, VUE_ENV_PORT, VUE_ENV_HTTPS, VUE_ENV_PFX, and VUE_ENV_PFX_PASSPHRASE are defined with the appropriate values.
  2. Restart the development server and test the application to see if the proxying issue has been resolved. Ensure that API requests are being properly proxied to the backend server.

By updating the configuration files, modifying the axios base URL, and verifying the environment variables, you should be able to solve the issue with proxying requests in the migrated Vite project.


Problems with vite


  1. “Error: Failed to resolve import statements” in Vite projects

Problem Description: One common issue encountered in Vite projects is the “Failed to resolve import statements” error. This error occurs when Vite is unable to resolve import statements for certain modules or dependencies in the codebase. It typically happens when using third-party libraries or when importing files with non-standard file extensions.

Solution: To resolve this issue, you can configure Vite to handle specific file extensions or provide custom resolution rules. This can be done by modifying the vite.config.js file. Here’s an example of how to configure Vite to handle imports of .vue and .scss files:


import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src',
    extensions: ['.js', '.vue', '.json', '.scss'],


In the above code, we use the resolve key in the configuration to specify the file extensions that Vite should handle. Additionally, we define an alias for the /src directory using the alias property, allowing us to use the @ symbol as a shorthand for importing files from the /src directory.

  1. “Error: Unknown plugin: [plugin-name]” when using custom plugins in Vite

Problem Description: When integrating custom plugins into a Vite project, you may encounter the “Unknown plugin” error. This error occurs when Vite fails to recognize or load a specific plugin, resulting in a build or runtime error.

Solution: To resolve this issue, ensure that the required plugin is properly installed and configured in your project. Additionally, you need to update the vite.config.js file to include the plugin configuration. Here’s an example:


import { defineConfig } from 'vite'
import myCustomPlugin from 'my-custom-plugin'

export default defineConfig({
  plugins: [myCustomPlugin()],


A brief introduction to vite


Vite is a build tool and development server that is designed to optimize the development experience for modern web applications. It leverages the native ES module support in modern browsers to enable lightning-fast builds and hot module replacement (HMR). Unlike traditional bundlers, Vite takes advantage of an on-demand compilation approach, which eliminates the need for time-consuming full recompilations during development. This makes Vite particularly well-suited for large codebases and projects utilizing frameworks like Vue.js and React.

At its core, Vite utilizes a development server that serves the application’s source code directly, without bundling it into a single file. Instead, Vite dynamically transforms and serves individual modules on-demand as they are requested by the browser. This approach significantly reduces the startup time and improves the overall development experience, allowing developers to see instant changes without manual page reloads. During the build process, Vite automatically generates optimized production builds that leverage bundling and minification techniques to ensure optimal performance and smaller file sizes.

Overall, Vite’s innovative approach to development tooling, utilizing native ES modules and on-demand compilation, provides a highly efficient and productive environment for modern web application development. It enables faster development cycles, instant feedback, and improved performance, making it an increasingly popular choice among developers.


Most popular use cases for vite


Vite can be used as a build tool and development server for modern web applications. It leverages native ES module support in modern browsers to enable fast builds and hot module replacement (HMR). With Vite, developers can quickly scaffold a project, manage dependencies, and optimize the application for production. For example, the following code block demonstrates how Vite can be used to create a new Vue.js project:


# Install Vue CLI globally (if not already installed)
npm install -g @vue/cli

# Create a new Vue project using Vite
vue create my-app --preset vite/vue


  1. Vite is well-suited for building applications with popular JavaScript frameworks like Vue.js and React. It provides optimized development experiences tailored to these frameworks, including features such as single-file components, JSX support, and automatic CSS module generation. Here’s an example of how Vite can be used to start a new React project:


# Initialize a new React project using Vite
npx create-react-app my-app --template vite
cd my-app

# Start the development server
npm run dev


  1. Vite’s on-demand compilation approach and efficient module loading make it an excellent choice for projects with large codebases. Instead of bundling all modules into a single file, Vite transforms and serves individual modules on-demand as they are requested by the browser. This leads to faster development cycles and enables developers to see instant changes without the need for manual page reloads. Additionally, Vite’s automatic code splitting and tree-shaking capabilities contribute to improved performance and smaller file sizes, resulting in faster load times for end users.



It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.