做个开源博客学习Vite2 + Vue3 （二）设置别名、代理和ESLint

// 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/, '')
      }
    }
  }
})
复制代码

yarn add axios
复制代码

import axios from 'axios'
const get = () => {
  axios.get('api/a')
    .then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
}
复制代码

// 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')
复制代码

yarn add eslint
复制代码

npx eslint --init
复制代码

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
复制代码