学Vue3.0得先学一下它

image

vite是什么

153

vite一词翻译成中文：快，在尤大神介绍Vue3.0时提到了vite这个工具，其描述是这样的：针对Vue单页面组件的无打包开发服务器，可以在浏览器运行请求的vue文件。

它和我们使用的vue-cli的作用基本相同，相当于vue项目构建的升级产品。vite在开发的时候没有打包过程，ES模块源码直接传输给浏览器，浏览器使用自带的

scss

cd $repo
yarn add -D sass

修改相关代码

jsx

在src下新建App.jsx

function App() {
  return (
页面仔小杨
)
}
export default App;

修改main.js

// import App from './App.vue'
import App from './App.jsx'

159

vite.config.js配置

const path = require('path')

module.exports = {
   /**
   * 在生产中服务时的基本公共路径。
   * @default '/'
   */
  base: '/',
  /**
   * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
   * @default 'dist'
   */
  outDir: 'dist',
  port: 3000,
  // 是否自动在浏览器打开
  open: true,
  // 是否开启 https
  https: false,
  // 服务端渲染
  ssr: false,
  // 引入第三方的配置
  optimizeDeps: {
    include: ["moment", "echarts", "axios", "mockjs"]
  },
  alias: {
    // 键必须以斜线开始和结束
    '/@/': path.resolve(__dirname, './src')
    // '/@components/': path.resolve(__dirname, './src/components')
  },
  proxy: {
    // 如果是 /itxing 打头，则访问地址如下
    '/itxing': 'http://192.168.1.95:8081',
    // 如果是 /api 打头，则访问地址如下
    '/api': {
       target: 'http://192.168.1.99:8080/',
       changeOrigin: true,
       rewrite: path => path.replace(/^\/api/, '')
     }
  }
}

注意一下别名配置， 不可配置成

alias: {
    '@': './src'
}

否则代码中使用@会报错，尤大神表示这是一个Bug，不过他已经提出了解决方案

160

使用别名时要使用/@/

其他信息详见https://github.com/vitejs/vite