Vue3.2+Vite2.x+Typescript项目基础搭建

Vuex官方文档
Element Plus官方文档
TypeScript中文网
Vue3中文文档

---

创建项目

使用开发工具为：Visual studio Code

---

全局安装vite

npm install -g create-vite-app

创建项目命令：

npm init vite 

依次选择 vue -> vue-ts

image.png

回车，项目创建完成，项目结构如下

image.png

安装项目中需要的依赖

npm install 

运行项目

npm run dev

---

配置目录别名

---

1.编辑vite.config.ts文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const path = require("path");

function _resolve(dir: string) {
  return path.resolve(__dirname, dir);
}

// https://vitejs.dev/config/
export default defineConfig({
  //配置目录别名
  resolve: {
    alias: {
      "/@": _resolve("src"),
      "/@components": _resolve("src/components"),
      "/@assets": _resolve("src/assets")
    },
  },
  plugins: [vue()],
});

安装上面配置需要的依赖

npm install path --save
npm i --save-dev @types/node

2.编辑tsconfig.json文件

添加baseurl，path配置

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "/@/*": ["src/*"],
      "/@components/*": ["src/components/*"],
      "/@assets/*": ["src/assets/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

测试：将App.vue 中的

import HelloWorld from './components/HelloWorld.vue'

改成

import HelloWorld from '/@components/HelloWorld.vue'

按住ctrl，鼠标点击HelloWorld.vue可以正常跳转即为配置成功。

---

项目启动端口及请求转发配置

---

编辑tsconfig.ts文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  //配置目录别名
  plugins: [vue()],
  server: {
    open: false, // 项目启动完成后是否自动在浏览器打开
    port: 3000, // 项目启动端口
    host: '0.0.0.0', //解决项目启动后，控制台出现 Network: use `--host` to expose的问题
    https: false,// 使用的是http协议则设置为false，https协议则设置为true
    //配置请求代理
    proxy: {
        '/api': {
            //所有的接口请求都会被代理到这个路径上，后台网关地址为http://127.0.0.1:10000/，所以配置的是这个
            target: 'http://127.0.0.1:10000/',
            /**
             * 重写路径，api及之前的会被替换为target的内容
             * 当我们在浏览器中看到请求的地址为：http://127.0.0.1/api/account-server/user/login
             * 实际上访问的地址是：http://127.0.0.1:10000/account-server/user/login
             */
            rewrite: (path) => path.replace(/^\/api/, ''),
            ws: true, // 是否启用webSockets
            secure: false, // 使用的是http协议则设置为false 安全证书校验
            //是否开启跨域 前后端分离项目此项开启
            changeOrigin: true,
        }
    },
},
});

---

多环境变量配置

1.安装cross-env

cross-env 通过js在平台设置不同的环境变量的工具

npm install --save-dev cross-env

2.根环境目录下创建环境配置文件、

.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略

如：开发环境，创建文件 .env.dev，内容如下

#环境名称
NODE_ENV = dev
#项目构建环境
VITE_BUILD_ENV = 'dev'
#后台访问地址
VITE_APP_BASE_API = 'http://127.0.0.1:3000'

生产环境，创建文件 .env.prod，内容如下

#环境名称
NODE_ENV = prod
#项目构建环境
VITE_BUILD_ENV = 'prod'
#后台访问地址
VITE_APP_BASE_API = 'http://10.52.0.38'

3.编辑package.json scripts配置项

"scripts": {
    "dev": "cross-env vite --mode dev",
    "test": "cross-env vite --mode test",
    "prod": "cross-env vite --mode prod",
    "build": "vite build",
    "build:dev": "vite build --mode dev",
    "build:test": "vite build --mode test",
    "build:prod": "vite build --mode prod"
  }

4.项目中获取配置的请求BASE_URL

const BASE_URL=import.meta.env.VITE_APP_BASE_API
console.log(BASE_URL)

打印结果：http://10.52.0.38
是我们在.env.prod 配置的url

vite 获取环境变量url 的方式为：import.meta.env

---

项目打包配置

---

1.编辑配置文件tsconfig.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],

  //项目打包配置
  build: {
    target: "modules",
    outDir: "dist", // 打包文件指定输出路径
    assetsDir: "static", // 指定生成静态资源的存放路径
    minify: "terser", // 混淆器,terser构建后文件体积更小
    // 移除console
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境移除console
        drop_debugger: true, // 生产环境移除debugger
      },
    },
    //配置多页面
    rollupOptions: {
      treeshake: false,
      //压缩最小输入
      output: {
        manualChunks(id: any) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  },
});

2.项目打包

package.json scripts配置的是开发环境为 "build:dev": "vite build --mode dev"，则开发环境打包命令为

npm run build:dev

---

Sass配置，css预编译配置

1.安装sass依赖，依次执行一下命令

npm i sass
npm i sass-loader
npm i node-sass

assets目录下创建文件夹scss，scss目录下创建预处理的scss文件，如

mixin.scss

@mixin no-wrap($lines) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

// 单行文本超出隐藏并显示...省略号
@mixin line-text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//多行文本超过行数显示省略号，只适用于WebKit及移动端
@mixin text-overflow($line: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

/* 四周阴影 */
@mixin box-shadow($bulr: 10px, $color: rgba(189, 205, 211, 0.5)) {
  -webkit-box-shadow: 0 0 $bulr $color;
  -moz-box-shadow: 0 0 $bulr $color;
  box-shadow: 0 0 $bulr $color;
}

// flex布局
@mixin layout($dir: column, $justify: center, $align: right) {
  display: flex;
  flex-direction: $dir;
  justify-content: $justify;
  align-items: $align;
}

@mixin userselect($val: none) {
  -webkit-user-select: $val;
  -moz-user-select: $val;
  -ms-user-select: $val;
  user-select: $val;
}

variable.scss

$page-user-select: none;

3.编辑tsconfig.ts文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //css预处理配置 全局引入scss文件
  css: {
    preprocessorOptions: {
      scss: {
        charset: false,
        additionalData:
          ` @import "/@assets/scss/mixin"; @import "/@assets/scss/variable";` 
      },
    },
  },
});