Vue3+TS+Vite development skills: how to deploy and go online the project

Vue3 TS Vite development skills: how to deploy and go online

1. Project setup
Before we start, we must first ensure that Node has been installed. js and Vue CLI, and then execute the following command to create a new Vue3 TS Vite project:

vue create project-name

Next, select "Manually select features", then check "TypeScript", and finally press Enter to install.

2. Development environment configuration

1. Modify the Vite configuration file
   Find the vite.config.ts file in the project root directory and modify the following content:

   import { defineConfig } from 'vite'
   
   export default defineConfig({
     base: './',
   })

   After setting like this, the project will be packaged using the current path as the base path.

2. Configure deployment directory
   Open the src/env/production.ts file and modify publicPath to the one you want to deploy the project Directory, for example:

   export default {
     publicPath: '/your-project-name/',
   }

   After setting like this, the packaged files will be automatically placed in the /your-project-name/ directory.

3. Project construction and packaging

1. Build the project
   Execute the following command to build the project into a deployable static file:

   npm run build

   After the construction is completed, a dist folder will be generated in the project root directory, which stores the packaged static files.

2. Local testing
   You can start a server locally to test the packaged project through the following command:

   npm install -g http-server
   cd dist
   http-server

   Then open http in the browser ://localhost:8080 to view the project effect.

4. Deploy to the server

1. Upload the packaged files to the server
   Put the files in the dist folder All files are uploaded to your server using FTP tools or other methods. Make sure the file is uploaded to the correct directory.

2. Configuring the server
   On your server, you need to configure a nginx (or other similar server software) to handle requests for static files. Assuming you are using nginx, you can add the following content in the configuration file:

   server {
     listen 80;
     server_name your-domain.com;
   
     location / {
    root /path/to/your-project/;
    try_files $uri $uri/ =404;
     }
   }

   Note that your-domain.com is replaced with your domain name,# Replace ##/path/to/your-project/ with the directory where you uploaded the project.

   Start the server
3. Restart the
   nginxserver to make the configuration take effect.
Check the deployment
4. Open your domain name or the IP address of the server. If everything is normal, you should be able to see your project running in the browser.
   
Summary

Through the above steps, we can deploy and go online the project developed based on Vue3 TS Vite so that it can run on the server. I hope this article can be helpful to you, and I wish your project goes online smoothly!


The above is the Vue3 TS Vite development skills: how to deploy and go online the project.
(The above article is for reference only, the specific operation needs to be adjusted according to the actual situation)

The above is the detailed content of Vue3+TS+Vite development skills: how to deploy and go online the project. For more information, please follow other related articles on the PHP Chinese website!