# vue2-course

**Repository Path**: byte-corps/vue2-course

## Basic Information

- **Project Name**: vue2-course
- **Description**: vue2.x学习demo
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-16
- **Last Updated**: 2023-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue2-course

> A Vue2.x.js project for learning [vue2.x](https://v2.cn.vuejs.org/)

## 1.Build Setup

``` bash
# install dependencies
npm install
yarn install

# add new denpendency
exp1: yarn add lodash
exp2: yarn add lodash@4.17.21

# add vue-router3.x for vue2.x
yarn add vue-router@3.5.1
# add vue3.x for vue2.x
yarn add vuex@3.5.1

# serve with hot reload at localhost:8080
npm run dev
yarn run dev

# build for production with minification
npm run build
yarn run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

## 2.Brief

### 2.1.[vue-router3.x功能](https://v3.router.vuejs.org/zh/guide/essentials/named-views.html#嵌套命名视图)

1. 安装引入
2. 静态路由
3. 动态路由
   1. 嵌套路由
   2. 命名路由
   3. 命名视图
   4. 重定向和别名
   5. 路由组件传参

## 3.Issues

### 3.1.Target version not match

- **issue说明：**

  Target version not match, you can specify the target version in vueCompilerOptions.target in tsconfig.json / jsconfig.json. (expected “target”: 2.7)

- **原因分析：**

  这是因为安装了[vue3](https://so.csdn.net/so/search?q=vue3&spm=1001.2101.3001.7020)对应的插件volar之后打开了**vue2版本的项目**导致的，需要在jsconfig.json里主动指明当前版本。

![请添加图片描述](README.assets/42526ed6a8ff473f8628e14552056fc1.png)

- **解决方法：**

  在项目根路径jsconfig(没有则新建一个jsconfig)添加以下配置即可

```JSON
"vueCompilerOptions": {
  "target": 2.7
}
```

​	完整json参考

```JSON
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "vueCompilerOptions": {
    "target": 2.7
  }
}
```

### 3.2.chunk 404

- **issue现象：**

​	在history模式出现chunk加载出错的情况，打开chrome的network发现那个chunk加载404了

- **原因分析：**

  在history模式中切换路由时，我们是真正改变了页面的url路径，所以webpack的runtime会认为它位于example.com/some/path。如果publicPath是设置的相对路径，那么webpack加载chunk时可能会变成example.com/some/path/static/js/3.js这样的路径，然而chunk的真正路径是example.com/static/js/3.js，

- **解决办法：**

​	需要将publicPath设置为绝对路径（publicPath: '/'）来解决这个问题