vite是下一代前端开发与构建工具,目前官方推荐使用vite来构建项目。下面我们来看看如何创建vue3项目。
npm init vite@latest yarn create vite pnpm create vite根据自己的情况选择合适的命令即可,我使用的是pnpm,所以:
pnpm create vite然后会让给你输入一个项目名称。再选择一个framework,因为我们创建vue3项目,所以选择vue即可。再选择代码语言,我习惯使用JavaScript。如下:
✔ Project name: … logistics-system ✔ Select a framework: › Vue ✔ Select a variant: › JavaScript项目创建完成会提示你后续需要做的工作,如下:
cd logistics-system pnpm install pnpm run dev运行项目
pnpm install会自动安装所有依赖,安装完成后执行pnpm run dev或pnpm dev就可以运行项目了,这时候可以看到:
➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help说明项目成功运行起来了,访问http://localhost:5173/ 即可看到默认页面了。
{ # 堆代码 duidaima.com "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 }注意:这里使用了格式化配置,需要先在vscode中安装插件prettier。这样当编辑文件后保存的时候就会自动进行格式化。
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()] ... });这样在import的时候,就可以直接使用“@/...”了。但是开发过程中会发现输入"@"并没有智能补全的提示,还需要在jsconfig.json(没有则创建一个)中配置一下,如下:
{ "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"] }在paths中配置一下,然后需要重启一下vscode,否则无法生效。
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://www.duidaima.com", // ws: true, // changeOrigin: true // } // } } });这样当我们执行pnpm dev开启服务后会自动打开浏览器,并且以https的方式访问。但是这里有一个问题,在vite3之后单独开启https并不够,这时候运行服务打开后会发现打不开页面,提示“协议不受支持”。官方文档这样说的:
pnpm install @vitejs/plugin-basic-ssl -D在开发环境使用即可,线上有正式签名。
... 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 // } // } }, ... });这样就可以正常访问了。
export async function getUserInfo() { return request({ url: "https://xxx.xxx.com/userInfo", method: "GET" }).catch(e => e); }一个请求用户信息的接口,本地调试cookie带不过去,导致获取不到数据。
... 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/, "") } } }, ... });代理的target就是原服务接口的host,这里我们将“/api”路径代理到原接口,简单来说就是将 https://localhost:3300/api/xxx代理到https://xxx.xxx.com/xxx
export async function getUserInfo() { return request({ url: "/api/userInfo", method: "GET" }).catch(e => e); }这样请求端口的时候因为是“localhost”,不跨域所以cookie正常,然后代理到原服务端接口就可以将cookie带过去了。