代码改变世界

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

2021-04-22 07:04  金色海洋(jyk)  阅读(1464)  评论(0编辑  收藏  举报

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 运行这个服务。

  • 测试运行
  1. 运行vue的项目,向后端申请数据,
  2. 这时候会先提交到vite2启动的web服务,
  3. 然后判断后再转给node建立的web服务,
  4. 处理之后返给node建立的web服务,
  5. 最后返给浏览器。

前端得到的数据是这样的:因为是通过vite2建立的服务做周转,所以不算跨域。

反向代理

测试通过。

安装ESlint

编写代码需要有一个共同的规范,虽然大家都有各自的习惯,但是还是需要尽量的统一一下,ESLint就是一个很好的选择。

vue-cli建立项目的时候就非常简单,我们选择一个风格就可以自动安装了,现在vite2还不够自动化,需要我们自己安装,今天学习了一下,补充这块短板。

  • 安装
yarn add eslint
  • 配置

问答的形式进行配置。

npx eslint --init

对自己狠一点,我们选择第三个,严格模式:

检查方式

选择 类型模块,选择 JavaScript modules:

模块类型

当然选 vue.js 了

选择框架

要不要用TS?目前不会,先不用了。

TS?

代码在哪里运行?注意这是多选,那就都选好了。

image.png

进入重点环节了,开始选择代码风格了。这个大概是问你,要套餐还是单点,符合主流,我们选套餐。

套餐还是单点?

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 。

2