Kemahiran pembangunan Vue3+TS+Vite: cara menggunakan dan menjalankan projek dalam talian

Vue3+TS+Vite kemahiran pembangunan: bagaimana untuk menggunakan dan pergi dalam talian

1. Persediaan projek
Sebelum bermula, Kami mula-mula pastikan Node.js dan Vue CLI telah dipasang, kemudian laksanakan arahan berikut untuk mencipta projek Vue3+TS+Vite baharu:

vue create project-name

Seterusnya, pilih "Pilih ciri secara manual", dan kemudian semak Pilih "TypeScript" dan akhirnya tekan Enter untuk memasang.

2. Konfigurasi persekitaran pembangunan

1. Ubah suai fail konfigurasi Vite
   Cari fail vite.config.ts dalam akar projek direktori. Dan ubah suai kandungan berikut:

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

   Salin selepas log masuk

   Selepas menetapkan ini, projek akan dibungkus menggunakan laluan semasa sebagai laluan asas.

2. Konfigurasikan direktori penempatan
   Buka fail src/env/production.ts dan tukar publicPath Ubahnya ke direktori tempat anda ingin menggunakan projek, contohnya: src/env/production.ts文件，并将publicPath修改为你要部署项目的目录，例如：

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

   Salin selepas log masuk

   这样设置之后，打包后的文件将会自动放在/your-project-name/目录下。

三、项目构建与打包

1. 构建项目
   执行以下命令，将项目构建为可部署的静态文件：

   npm run build

   Salin selepas log masuk

   构建完成后，在项目根目录下会生成一个dist文件夹，里面存放着打包后的静态文件。

2. 本地测试
   可以通过以下命令在本地启动一个服务器来测试打包后的项目：

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

   Salin selepas log masuk

   然后在浏览器中打开http://localhost:8080即可查看项目效果。

四、部署到服务器

1. 将打包后的文件上传到服务器上
   将dist文件夹中的所有文件上传到你的服务器上，可以使用FTP工具或者其他方法进行上传。确保文件上传到了正确的目录下。

2. 配置服务器
   在你的服务器上，需要配置一个nginx（或其他类似的服务器软件）来处理静态文件的请求。假设你使用的是nginx，则可以在配置文件中添加以下内容：

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

   Salin selepas log masuk

   注意将your-domain.com替换为你的域名，/path/to/your-project/替换为你上传项目的目录。

3. 启动服务器
   重启nginxrrreee
Selepas menetapkan seperti ini, fail yang dibungkus akan diletakkan secara automatik dalam /your-project-name/ direktori. <li><br></li>3 Pembinaan dan pembungkusan projek<p><br></p> <p>Bina projek</p>Melaksanakan arahan berikut pindahkan projek Bina sebagai fail statik boleh pakai: <p>rrreee</p>Selepas binaan selesai, folder <code>dist akan dijana dalam direktori akar projek, yang menyimpan fail statik yang dibungkus. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#Ujian tempatan#🎜🎜#Anda boleh memulakan pelayan secara setempat untuk menguji projek yang dibungkus melalui arahan berikut: #🎜🎜#rrreee#🎜🎜#Kemudian semak imbas Buka http://localhost:8080 dalam penyemak imbas untuk melihat kesan projek. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#4. Serahkan ke pelayan#🎜🎜##🎜🎜##🎜🎜#Muat naik fail yang dibungkus ke pelayan#🎜🎜>#Place fail dalam folder dist dimuat naik ke pelayan anda Anda boleh menggunakan alat FTP atau kaedah lain untuk memuat naik. Pastikan fail dimuat naik ke direktori yang betul. #🎜🎜##🎜🎜##🎜🎜#Pelayan Konfigurasi#🎜🎜#Pada pelayan anda, anda perlu mengkonfigurasi nginx (atau perisian pelayan lain yang serupa) untuk mengendalikan permintaan untuk fail statik. Dengan mengandaikan anda menggunakan nginx, anda boleh menambah kandungan berikut dalam fail konfigurasi: #🎜🎜#rrreee#🎜🎜#Nota bahawa menggantikan your-domain.com dengan anda nama domain, gantikan /path/to/your-project/ dengan direktori tempat anda memuat naik projek. #🎜🎜##🎜🎜##🎜🎜#Mulakan pelayan#🎜🎜#Mulakan semula pelayan nginx untuk menjadikan konfigurasi berkuat kuasa. #🎜🎜##🎜🎜#Check Deployment#🎜🎜#Buka nama domain anda atau alamat IP pelayan Jika semuanya baik-baik saja, anda sepatutnya dapat melihat projek anda berjalan dalam penyemak imbas. #🎜🎜##🎜🎜##🎜🎜#Ringkasan#🎜🎜#Melalui langkah di atas, kami boleh menggunakan dan pergi ke dalam talian projek yang dibangunkan berdasarkan Vue3+TS+Vite supaya ia boleh dijalankan pada pelayan. Saya harap artikel ini dapat membantu anda, dan saya berharap projek anda berjalan dalam talian dengan lancar! #🎜🎜##🎜🎜#Di atas ialah kemahiran pembangunan Vue3+TS+Vite: cara menggunakan dan menggunakan projek dalam talian. #🎜🎜##🎜🎜# (Artikel di atas adalah untuk rujukan sahaja, operasi khusus perlu dilaraskan mengikut situasi sebenar) #🎜🎜#

Atas ialah kandungan terperinci Kemahiran pembangunan Vue3+TS+Vite: cara menggunakan dan menjalankan projek dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!