一、前情提要
只适用于已安装node、修改过淘宝镜像等前期准备工作，直接开始进行项目创建。
二、创建新项目
1、先创建一个文件夹，也可以通过VSCode打开已有文件夹。（此文件夹为新创建项目的上级文件夹）
2、选中打开的文件夹，点击右上角打开终端，也可以通过查看打开终端
3、切换Command Prompt
4、输入npm create vite@latest，再输入项目名称->回车->选中vue，不知道怎么选就一直回车完成接下去的选项(vite)
使用npm create vue@latest创建，则可以在一定程度上直接配置好相对应的一些依赖等。
vite是下一代前端开发与构建工具，目前官方推荐使用vite来构建项目。
5、最后按照创建成功后的提示输入命令即可运行项目 <template></template>
三、项目运行过程中遇到的问题及解决办法
1、vue3 <template></template> 标签内多根节点报错问题解决办法
【注】
官方提供了多种创建命令，如下：
npm init vite@latest
yarn create vite
pnpm create vite
根据自己的情况选择合适的命令即可，我使用的是pnpm，所以：
pnpm create vite
然后会让给你输入一个项目名称。再选择一个framework，因为我们创建vue项目，所以选择vue，再选择代码语言，我习惯使用JavaScript。如下：
✔ Project name: … logistics-system
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript
项目创建完成会提示你后续需要做的工作，如下：
cd vite-project /* 项目名称*/
npm install
npm run dev
运行项目
根据提示操作即可
1）先进入项目
cd vite-project /* 项目名称*/
2）然后执行：会自动安装所有依赖，安装完成后执行
pnpm install
3）启动项目
npm run dev
输入命令就可以运行项目了，这时候可以看到：
➜ Local: http://localhost:5173/
➜ Network: use --host to expose ➜ press h to show help
说明项目成功运行起来了，访问http://localhost:5173/ 即可看到默认页面了。
配置项目
成功创建并运行项目后，下面我们就需要进行一些配置，这样方便我们后续开发。
setting.json
vscode可以在项目配置个性的设定，首先需要创建setting.json文件，在vscode中点击左下角的设置按钮，选择命令面板（或者直接使用快捷键 shift+command+p），然后搜索“setting.json”，选择“Open Workspace Setting(JSON)”即可。
然后就可以看到在项目的.vscode目录下新建了一个setting.json文件，当然这个是个空文件，我们按照相关规则进行配置即可，下面是一个示例：
{
"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。这样当编辑文件后保存的时候就会自动进行格式化。
src别名
在vite.config.js中为src目录配置一个别名，如下：
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
...
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，否则无法生效。
开启https
在vite.config.js中可以进行服务器相关配置，比如端口、代理、开启https，如下：
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
// }
// }
}
});
这样当我们执行
pnpm dev
开启服务后会自动打开浏览器，并且以https的方式访问。
但是这里有一个问题，在vite3之后单独开启https并不够，这时候运行服务打开后会发现打不开页面，提示“协议不受支持”。官方文档这样说的：
server.https¶
- 类型： boolean | https.ServerOptions
启用 TLS + HTTP/2。注意：当
server.proxy
选项 也被使用时，将会仅使用 TLS。这个值也可以是一个传递给
https.createServer()
的 选项对象。需要一个合法可用的证书。对基本使用的配置需求来说，你可以添加 @vitejs/plugin-basic-ssl 到项目插件中，它会自动创建和缓存一个自签名的证书。但我们推荐你创建和使用你自己的证书。
所以还需要安装一个@vitejs/plugin-basic-ssl插件，执行命令
pnpm install @vitejs/plugin-basic-ssl -D
在开发环境使用即可，线上有正式签名。
然后在vite.config.js中进行配置，如下：
...
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
// }
// }
},
...
});
这样就可以正常访问了。
代理
上面提到可以在vite.config.js配置代理，通过代理可以解决跨越请求的问题。
比如我们在本机（localhost）上调试，请求服务端接口的时候因为host不同导致跨域，这样就导致cookie带不过去，但是服务端接口又是通过cookie来检验用户的，所以接口请求不成功。
类似的情况就可以用代理来解决，以axios为例，具体怎么使用这里就不细说了，这里只关注请求接口的代码，如下：
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://localhost:3300/api/userInfo
代理到
这里的"/api"是为了与前端页面路径进行区分，所以在代理的时候需要通过
rewrite
去掉。
然后修改请求如下：
export async function getUserInfo() {
return request({
url: "/api/userInfo",
method: "GET"
}).catch(e => e);
}
这样请求端口的时候因为是“localhost”，不跨域所以cookie正常，然后代理到原服务端接口就可以将cookie带过去了。
代理还有另外一个作用，当前端页面是https的时候，如果服务端接口是http则无法请求，浏览器会限制。通过设置代理就可以正常进行请求了。
版权归原作者 _蓝胖子 所有， 如有侵权，请联系我们删除。