搭建模板seo优化的技巧

vue3+vite4项目，配置代理实现本地开发跨域问题

非同源请求，也就是协议(protocol)、端口(port)、主机(host)其中一项不相同的时候，这时候就会产生跨域

1. vite的proxy代理和vue-cli的proxy大致相同，需要在vite.config.js文件中配置（打包配置也在此）
2. 代理配置在server中，可以上vite官网服务器选项查看server.proxy代码示例：开发服务器选项–server.proxy
3. 需要注意：使用了代理之后，axios的base路径需要改成代理路径，比如
   
4. ok 直接贴配置代码：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from "fs"
// https://vitejs.dev/config/
export default defineConfig({base: './', //相对路径plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},css: {preprocessorOptions: {less: {modifyVars: {},javascriptEnabled: true,},},},build: {minify:'terser',outDir: "./dist",//emptyOutDir: true,//assetsDir: "assets", //指定静态资源存放路径// sourcemap: false, //是否构建source map 文件terserOptions: {// 生产环境移除consolecompress: {drop_console: false,drop_debugger: true,},},// 块大小警告的限制（以 kbs 为单位） 默认： 500chunkSizeWarningLimit: 1000,// 分解块，将大块分解成更小的块rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return id.toString().split('node_modules/')[1].split('/')[0].toString();}},chunkFileNames: (chunkInfo) => {const facadeModuleId = chunkInfo.facadeModuleId? chunkInfo.facadeModuleId.split('/'): [];const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';return `js/${fileName}/[name].[hash].js`;}}},},server: {// 配置https代理与证书https: {key: fs.readFileSync('cert/8982715__nsfocus.com.key'),cert: fs.readFileSync('cert/8982715__nsfocus.com.pem')},// 是否开启 httpsopen: false, // 是否自动在浏览器打开port: 8899, // 端口号host: "0.0.0.0",//这里的ip和端口是前端项目的;下面为需要跨域访问后端项目proxy: {'/seatsapi/': {   // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的target: 'https://miccdev.nsfocus.com/',//这里填入你要请求的接口的前缀ws: false,//代理websockedchangeOrigin: true,  //是否跨域secure: true,  //是否https接口// pathRewrite:{  // pathRewrite 的作用是把实际Request Url中的'/api'用""代替//   "^/": "/"// },//   headers: {//     referer: 'https://uat.nsfocus.com/api/input_suggest', //这里后端做了拒绝策略限制，请求头必须携带referer，否则无法访问后台//   }}}},
})

结束，总结完毕 ~ 简单易懂 ~