卡卡罗特

Appearance

鼓励作者：欢迎打赏犒劳

02-vue3项目搭建 ​

主要记录一下vue3项目搭建

Vue3 后台管理系统模板列表：https://blog.csdn.net/weixin_44106553/article/details/136675172

创建vue3+vite项目 ​

这里是利用vite脚手架来快速创建项目

安装vue-cli脚手架 （可忽略）

shell
npm install -g @vue/cli --force

安装vite脚手架

shell
npm install -g create-vite-app

创建 vue3 项目

shell
create-vite-app vue3-demo

nvm

整合ElementPlus ​

安装依赖

shell
# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

src\main.js

完整引入

js
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

测试是否正常

vue
<template>
  <el-button type="primary" >Primary</el-button>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

不同的环境执行不同的配置文件 ​

配置文件加载 ​

vite项目启动默认会加载配置文件。本地启动默认取的是.env.development文件, .env是公共文件

  • .env：公共环境
  • .env.development：开发环境
  • .env.production：生产环境

通过命令加载指定的配置文件

shell
"dev": "vite --mode development",
text
# .env.development 文件中
# 没有以 `VITE_` 为前缀 不会暴露出去
USER_PASSWORD = foobar 
# 可以暴露出去
VITE_APP_BASE_PATH = https://blog.share888.top/

vue文件使用

vue
<script setup>
// 直接使用import.meta.env去读取环境变量文件里面的某个属性
console.log(import.meta.env);

//可以直接读取当前的环境。自带的默认属性
console.log(import.meta.env.MODE);
const VITE_APP_BASE_PATH = import.meta.env.VITE_APP_BASE_PATH;
</script>

js文件加载 ​

官网：https://vitejs.dev/config/

其他方式：https://blog.csdn.net/qq_39505245/article/details/134332060

我在用这种方式的时候，各种报错。很烦。

除了配置文件加载之外还可以通过js文件来实现不同的配置文件加载，更加的灵活。 vite.config.js

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

export default defineConfig({
  plugins: [vue()],
});

package.json

json
{
    "dependencies": {
      "vue": "^3.0.4"
    },
    "devDependencies": {
      "@vitejs/plugin-vue": "^5.0.4",
      "@vue/compiler-sfc": "^3.0.4",
      "vite": "^3.2.10"
    }
}

配置@路径别名 ​

对于使用 Vite 构建的 Vue 3 项目，你需要在项目根目录下 vite.config.js 文件中配置路径别名。

js
// vite.config.js
import path from 'path';

// vite.config.js
export default ({ command }) => {
    return {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src'),
            },
        },
    }
};

服务端口代理配置 ​

js
import fs from 'fs';
import path from 'path';
// https支持 读取本地证书
const cert = fs.readFileSync(path.resolve(__dirname, 'localhost.pem'));
const key = fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem'));

// vite.config.js
export default ({ command,mode }) => {
    // 获取 Vite 定义的环境变量
    const isProduction = mode === 'production';
    return {
        server: {
            port: 3002, //项目端口
            host: '0.0.0.0',
            open: true, //启动服务，自动打开浏览器
            https: { //配置https证书
              key: key,
              cert: cert,
            },
            proxy: { // 代理配置
                //比如访问 http://localhost:3002/prod-api/3 其实就是访问 https://jsonplaceholder.typicode.com/todos/3
                "/prod-api": { // 代理接口前缀为/prod-api的请求
                    "target": isProduction ? 'https://jsonplaceholder.typicode.com/todos' : 'https://baidu.com', // 对应的代理地址
                    "secure": false, // 接受运行在https上，默认不接受
                    "changeOrigin": true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
                    rewrite: (p) => p.replace(/^\/prod-api/, ""), //重写路径 比如'/prod-api/aaa/ccc'重写为'/aaa/ccc'
                    bypass(req, res, options) { //专门查看请求的真实地址
                        const proxyURL = options.target + options.rewrite(req.url)
                        console.log('proxyURL', proxyURL)
                        req.headers['x-req-proxyURL'] = proxyURL // 设置未生效
                        res.setHeader('x-req-proxyURL', proxyURL) // 设置响应头可以看到
                    },
                },
            },

        },
    }
};

vite实现Mock数据 ​

添加mock插件依赖

json
{
"devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite-plugin-mock": "3.0.2",
    "vite": "^4.5.3"
  }
}

vite.config.js 添加插件

js
// vite.config.js
import { viteMockServe } from 'vite-plugin-mock'
import vue from "@vitejs/plugin-vue";


export default ({ command }) => {
    return {
        plugins: [
            vue(),
            viteMockServe({
                enable: command === 'serve', // 是否使用mock接口；等于serve是开发阶段使用mock接口
            }),
        ],
    }
};

根目录创建 mock/user.js，和node_moudules同级；

访问：http://localhost:3002/mock/user/info 就能访问。还可以传参进行逻辑处理.

body 可以得到传参。 request可以得到所有的数据，包括headers

js
const users = [
  { name: 'admin', password: '123456', token: 'admin', info: {
    name: '系统管理员'
  }},
  { name: 'editor', password: '123456', token: 'editor', info: {
    name: '编辑人员'
  }},
  { name: 'test', password: '123456', token: 'test', info: {
    name: '测试人员'
  }},
]
export default [
  {
    url: `/mock/user/login`,
    method: 'post',
    response: ({ body }) => {
      const user = users.find(user => {
        return body.name === user.name && body.password === user.password
      })
      if (user) {
        return {
          code: 200,
          data: {
            token: user.token,
          },
        };
      } else {
        return {
          code: 401,
          data: {},
          msg: '用户名或密码错误'
        };
      }
      
    }
  },
  {
      url: `/mock/user/info`,
      method: 'get',
      response: (request) => {
        const token  = request.headers.token;;
        if (token){
          return {
            code: 200,
            data: users[0],
            msg: 'success'
          };
        } else{
          return "还没登录"
        }
      }
    }
]

遇到的问题汇总 ​

vite.defineConfig报错 ​

TypeError: vite.defineConfig is not a function

引入vite.config.js之后，启动项目报错 nvm

vite的版本太低，升级版本即可

json
"vite": "^3.2.10"

webstorm vue项目 @/xx/xx 相对路径不能跳转到对应文件 ​

一般情况下，我们在路由文件中写的路径都是@/components/HelloWorld.vue 这种的形式，但是不会跳转就很气人，可以设置一下让可以跳转。

1.跟目录(与src同级)下创建jsconfig.json 2.jsconfig.json 配置内容

json
{
    "compilerOptions": {
        "types": [
            "@dcloudio/types"
        ],
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "target": "ES6",
        "allowSyntheticDefaultImports": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

无法处理VUE文件 ​

[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

依赖，主要下载 @vitejs/plugin-vue

json
{
    "dependencies": {
      "vue": "^3.0.4"
    },
    "devDependencies": {
      "@vitejs/plugin-vue": "^5.0.4",
      "vite": "^3.2.10"
    }
}

vite.config.js

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

export default defineConfig({
  plugins: [vue()],
});

如有转载或 CV 的请标注本站原文地址

Copyright © 2022-2024