prefacio

Vite es una herramienta de construcción y desarrollo front-end de próxima generación. Actualmente, se recomienda oficialmente utilizar vite para construir proyectos. Echemos un vistazo a cómo crear un proyecto vue3.

crear proyecto

El funcionario proporciona una variedad de comandos de creación, de la siguiente manera:

npm init vite@latest


yarn create vite


pnpm create vite

Simplemente elija el comando apropiado según su propia situación. Yo uso pnpm, entonces:

pnpm create vite

Luego le pedirá que ingrese un nombre de proyecto. Elija otro marco, porque creamos un proyecto vue3, así que simplemente elija vue. Luego elija el lenguaje de código, estoy acostumbrado a usar JavaScript. como sigue:

✔ Project name: … logistics-system
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Una vez creado el proyecto, se le solicitará el trabajo de seguimiento, de la siguiente manera:

cd logistics-system
  pnpm install
  pnpm run dev

ejecutar proyecto

Simplemente siga las instrucciones, primero ingrese al proyecto y luego ejecute

pnpm install

Todas las dependencias se instalarán automáticamente. Una vez completada la instalación, ejecute pnpm run devo pnpm devejecute el proyecto. En este momento, podrá ver:

➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Significa que el proyecto se está ejecutando correctamente y puede ver la página predeterminada visitando http://localhost:5173/.

elementos de configuración

Después de crear y ejecutar con éxito el proyecto, necesitamos realizar algunas configuraciones para facilitar nuestro desarrollo posterior.

configuración.json

vscode puede configurar ajustes individuales en el proyecto. Primero, debe crear un archivo settings.json. Haga clic en el botón de configuración en la esquina inferior izquierda de vscode, seleccione el panel de comandos (o use directamente la tecla de acceso directo shift+comando+p). y busque "setting.json", seleccione "Abrir configuración del espacio de trabajo (JSON)".

Luego puede ver que se ha creado un nuevo archivo settings.json en el directorio .vscode del proyecto. Por supuesto, este es un archivo vacío. Podemos configurarlo de acuerdo con las reglas relevantes. El siguiente es un ejemplo:

{
  "files.autoSave": "off",
  "git.autofetch": true,
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.wpy": "javascriptreact",
    "*.py": "python"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "git.confirmSync": false,
  "search.actionsPosition": "right",
  "search.exclude": {
    "**/dist": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.suggestSelection": "first",
  "files.exclude": {
    "**/node_modules": true,
    "*/node_modules": true
  },
  "sync.gist": "686f9b0e863088a613cdc96e5bc81c55",
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "beautify.language": {
    "js": {
      "type": ["javascript", "json", "jsonc"],
      "filename": [".jshintrc", ".jsbeautifyrc"]
    },
    "css": ["css", "less", "scss"],
    "html": ["htm", "html"]
  },
  "editor.tabSize": 2,
  "sync.autoUpload": true,
  "sync.forceUpload": false,
  "sync.forceDownload": false,
  "sync.autoDownload": true,
  "beautify.config": "",
  "prettier.trailingComma": "none",
  "prettier.arrowParens": "avoid",
  "editor.fontSize": 13,
  // "workbench.colorTheme": "Visual Studio Dark",
  "editor.accessibilitySupport": "on",
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.rulers": [],
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "extensions.closeExtensionDetailsOnViewChange": true,
  "[javascriptreact]": {
    "editor.defaultFormatter": "svipas.prettier-plus"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.format.enable": true,
  "editor.formatOnSave": true,
  "prettier.singleQuote": false,
  "prettier.semi": true
}

Nota: Aquí se utiliza la configuración de formato y el complemento más bonito debe instalarse primero en vscode. Esto formateará automáticamente el archivo cuando se guarde después de editarlo.

alias src

Configure un alias para el directorio src en vite.config.js, de la siguiente manera:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
...


// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  },
  plugins: [vue()]
  ...
});

De esta forma, al importar, puede utilizar directamente "@/...".

Sin embargo, durante el proceso de desarrollo, encontrará que no hay un mensaje de finalización inteligente para ingresar "@", y debe configurarlo en jsconfig.json (cree uno si no tiene uno), de la siguiente manera:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "jsx": "preserve",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "exclude": ["node_modules"]
}

Configúrelo en rutas y luego deberá reiniciar vscode; de lo contrario, no tendrá efecto.

abrir https

En vite.config.js, puede realizar configuraciones relacionadas con el servidor, como puerto, proxy y habilitar https, de la siguiente manera:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";




export default defineConfig({
  resolve: {
    ...
  },
  plugins: [
    vue()
  ],
  base: "/", // 打包路径
  server: {
    host: "0.0.0.0",
    port: 3300, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    https: true
    // proxy: {
    //   "/api/": {
    //     target: "https://xxx.xxx.cn",
    //     ws: true,
    //     changeOrigin: true
    //   }
    // }
  }
});

De esta forma, cuando iniciemos pnpm devel servicio, automáticamente se abrirá el navegador y se accederá a él en https.

Pero hay un problema aquí: no es suficiente habilitar https después de vite3. En este momento, después de activar el servicio en ejecución, se encontrará que la página no se puede abrir y aparecerá el mensaje "el protocolo no es compatible". . La documentación oficial dice esto:

servidor.https¶

tipo: boolean | https.ServerOptions

Habilite TLS + HTTP/2. NOTA: Cuando server.proxy también se usa la opción, solo se usará TLS.

Este valor también puede ser un https.createServer() objeto de opciones pasado a .

Se requiere un certificado legalmente disponible. Para requisitos de configuración básicos, puede agregar @vitejs/plugin-basic-ssl al complemento del proyecto, que creará y almacenará en caché automáticamente un certificado autofirmado. Pero le recomendamos que cree y utilice sus propios certificados.

Entonces también necesitas instalar un complemento @vitejs/plugin-basic-ssl, ejecutar el comando

pnpm install @vitejs/plugin-basic-ssl -D

Se puede utilizar en el entorno de desarrollo y existe una firma oficial en línea.

Luego configúrelo en vite.config.js, de la siguiente manera:

...
import basicSsl from "@vitejs/plugin-basic-ssl";


export default defineConfig({
  resolve: {
    ...
  },
  plugins: [
    ...
    vue(),
    basicSsl()
  ],
  base: "/", // 打包路径
  server: {
    host: "0.0.0.0",
    port: 3300, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    https: true
    // proxy: {
    //   "/api/": {
    //     target: "https://xxx.xxx.cn",
    //     ws: true,
    //     changeOrigin: true
    //   }
    // }
  },
  ...
});

Entonces podrás acceder con normalidad.

interino

Como se mencionó anteriormente, el proxy se puede configurar en vite.config.js y el problema de las solicitudes cruzadas se puede resolver a través del proxy.

Por ejemplo, cuando depuramos en esta máquina (localhost), cuando solicitamos la interfaz del servidor, debido a que el host es diferente, se produce el dominio cruzado, lo que hace que la cookie no pase, pero la interfaz del servidor usa cookies para verificar. el usuario, por lo que la solicitud de interfaz no tiene éxito.

Una situación similar se puede resolver con un proxy. Tomando axios como ejemplo, no entraré en detalles sobre cómo usarlo aquí. Aquí solo nos centramos en el código de la interfaz de solicitud, de la siguiente manera:

export async function getUserInfo() {
  return request({
    url: "https://xxx.xxx.com/userInfo",
    method: "GET"
  }).catch(e => e);
}

Una interfaz que solicita información del usuario, la cookie de depuración local no se puede transferir, lo que resulta en la imposibilidad de obtener datos.

Primero configuremos un proxy, de la siguiente manera:

...


export default defineConfig({
  resolve: {
    ...
  },
  plugins: [
    ...
  ],
  base: "/", // 打包路径
  server: {
    host: "0.0.0.0",
    port: 3300, 
    open: true, 
    cors: true, 
    https: true
    proxy: {  //设置代理
      "/api": {
        target: "https://xxx.xxx.com",
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, "")
      }
    }
  },
  ...
});

El objetivo del proxy es el host de la interfaz de servicio original. Aquí representamos la ruta "/ api" a la interfaz original https://localhost:3300/api/xxx.https://xxx.xxx.com/xxx

Tomando la interfaz de información del usuario anterior como ejemplo, es un https://localhost:3300/api/userInfoproxy parahttps://xxx.xxx.com/userInfo

"/ api" aquí es para distinguirlo de la ruta de la página de inicio, por lo que debe eliminarse al realizar proxy rewrite.

Luego modifique la solicitud de la siguiente manera:

export async function getUserInfo() {
  return request({
    url: "/api/userInfo",
    method: "GET"
  }).catch(e => e);
}

De esta manera, cuando se solicita el puerto, es "localhost" y no cruza dominios, por lo que la cookie es normal y luego la cookie se puede transferir mediante proxy a la interfaz del servidor original.

El proxy tiene otra función: cuando la página de inicio es https, si la interfaz del servidor es http, la solicitud no se puede realizar y el navegador la limitará. Al configurar el proxy, la solicitud se puede realizar normalmente. Por ejemplo, el entorno de prueba anterior es un https://localhost:3300/apidev/xxxproxy parahttp://dev.xxx.com/xxx

Beneficios para los fanáticos

Comparta un código fuente de blog moderno (blog sin cabeza), la popular solución de blog sin cabeza actual. Este código fuente utiliza React, tecnología GatsbyJS v5 y tiene nueve tipos diferentes de estilos de blog. Este blog no solo admite archivos Markdown locales, sino que también admite sistemas de administración de contenido como Contentful CMS, Strapi CMS, Netlify CMS y Sanity CMS, lo que le permite crear libremente artículos de blog. Si le gusta, acéptelo rápidamente.

Comparta una guía introductoria para crear proyectos Vue3 usando Vite

servidor.https¶

Beneficios para los fanáticos

Supongo que te gusta