vue代理和nginx代理的区别（做个开源博客学习Vite2）
vue代理和nginx代理的区别（做个开源博客学习Vite2）编写代码需要有一个共同的规范，虽然大家都有各自的习惯，但是还是需要尽量的统一一下，ESLint就是一个很好的选择。测试通过。import axios from 'axios' const get = () => { axios.get('api/a') .then(res => { console.log(res); }).catch(err => { console.log(err); }) }后端测试代码后端使用node建立一个最简单的web服务// server.js const http = require('http'); http.createServer(function(request response) { // 设置响应头 response
vite2可以有很多配置，也可以都使用默认配置，这个看项目需要。
vite.config.js我们先看看 vite.config.js里面的常用配置，其他配置可以看官网：https://cn.vitejs.dev/config/
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path" // 主要用于alias文件路径别名
// 加别名的函数
function pathResolve(dir) {
return resolve(__dirname "." dir)
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()] // 配置需要使用的插件列表，这里将vue添加进去
// 配置文件别名 vite1.0是/@/ 2.0改为/@
// 这里是将src目录配置别名为 /@ 方便在项目中导入src目录下的文件
resolve: {
alias: {
"/@": pathResolve("src")
"/config": pathResolve("public/config")
"/com": pathResolve("src/components")
}
}
base: "vue3-blog" // 便于发布到gitee
// 打包配置
build: {
target: 'modules'
// outDir: 'dist' //指定输出路径
// assetsDir: 'assets' // 指定生成静态资源的存放路径
minify: 'terser' // 混淆器，terser构建后文件体积更小
}
// 本地运行配置，及反向代理配置
server: {
cors: true // 默认启用并允许任何源
open: true // 在服务器启动时自动在浏览器中打开应用程序
//反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
proxy: {
'/api': {
target: 'http://192.168.99.223:9000' //代理接口
changeOrigin: true
rewrite: (path) => path.replace(/^\/api/ '')
}
}
}
})
- 别名
这里尝试了好多种方法，发现这种可行。主要是官网似乎也没说 resolve 要 在哪里引用。 - base
默认情况下，会认为项目运行在网站的根目录里面，但是有些情况下项目无法运行在根目录里面，
比如发布到GitHub，只能使用 https://naturefw.gitee.io/vue3-blog 这样的目录，那么这时候就需要设置这个base了。
也很简单 base: "vue3-blog" 这样就可以，这样发布打包的时候就可以正确设置js、css等的引用路径。 - 反向代理
这个主要是处理ajax（axios）的跨域访问的。以前对这个比较模糊，不过尝试之后就清晰了。
尝试一下跨域访问的方式。
- 安装 axios
yarn add axios
- 前端测试代码
然后在组件里面做一个简单的测试。
import axios from 'axios'
const get = () => {
axios.get('api/a')
.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
}
- 后端测试代码
后端使用node建立一个最简单的web服务
// server.js
const http = require('http');
http.createServer(function(request response) {
// 设置响应头
response.writeHeader(200 {
"Content-Type" : "text/plain"
});
console.log('有访问者')
// 响应主体为 "Hello world!"
response.write("Hello world!");
response.end();
})
// 设置监听端口为9000
.listen(9000);
console.log('请打开：http://localhost:9000')
用 node server.js 运行这个服务。
- 测试运行
- 运行vue的项目，向后端申请数据，
- 这时候会先提交到vite2启动的web服务，
- 然后判断后再转给node建立的web服务，
- 处理之后返给node建立的web服务，
- 最后返给浏览器。
前端得到的数据是这样的：因为是通过vite2建立的服务做周转，所以不算跨域。
测试通过。
安装ESlint编写代码需要有一个共同的规范，虽然大家都有各自的习惯，但是还是需要尽量的统一一下，ESLint就是一个很好的选择。
vue-cli建立项目的时候就非常简单，我们选择一个风格就可以自动安装了，现在vite2还不够自动化，需要我们自己安装，今天学习了一下，补充这块短板。
- 安装
yarn add eslint
- 配置
问答的形式进行配置。
npx eslint --init
对自己狠一点，我们选择第三个，严格模式：
选择 类型模块，选择 JavaScript modules：
当然选 vue.js 了
要不要用TS？目前不会，先不用了。
代码在哪里运行？注意这是多选，那就都选好了。
进入重点环节了，开始选择代码风格了。这个大概是问你，要套餐还是单点，符合主流，我们选套餐。
vue-cli4.5建立的项， 选择的是 Standard config （ESLint 标准配置），所以这里选第二项。据说这些都是各位大牛总结出来的，我们按照这个来就好。
选择配置文件的格式，这里选择js
立即执行？
其实我是想用 yarn 安装的，但是又不知道怎么写。
yarn add
eslint-plugin-vue@latest
eslint-config-standard@latest
eslint@^7.12.1
eslint-plugin-import@^2.22.1
eslint-plugin-node@^11.1.0
eslint-plugin-promise@^4.2.1
需要写成一行。
果然还是应该用 yarn 来安装。
VSCode 使用 ESLint 配置文件需要去插件市场下载插件 ESLint 。
