Vue3.0中的一些变化

Vue 3.x 的安装教程，请点击文末【阅读原文】查看

以下主要说明一下Router 的变化和 Static文件夹的变化

一、Router变化：

在2.X版本中，路由是在src文件夹下的Router文件夹里的index.js 配置

配置如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/city',
    name: 'City',
    component: City
  }, {
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
  }]
})

在Vue3.x版本中，路由是在src文件夹下router.js 文件中配置

配置如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/home/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }]
})

二、static变化

在2.X版本中，static是存放在项目根目录下的，里边存放一些静态文件
在3.X版本中，取消了static文件，统一归化到了public文件夹中。所有的静态文件都存放到public文件中，以前放在static中的文件，直接复制到public中就可以了

还有一点，我们通过域名访问静态文件时，也有所变更，区别如下：

2.X版本：localhost:8080/static/index.html    
3.X版本：localhost:8080/index.html

3.X版本，访问静态文件默认会去public下查找，这点需要注意，不需要在路由中添加public，跟static有区别

三、vue.config.js变化

Vue项目的配置在2.X版本中，都是在config下配置的；在3.X版本中，都是在vue.config.js 中配置

在3.X版本中，新建项目后，项目根目录下是不会自动创建vue.config.js文件的，需要你手动创建

这里我贴一小部分，主要是服务启动端口和配置的代理转发

module.exports = {
    assetsDir: 'static',
    devServer: {
        host: 'localhost',
        // host: "0.0.0.0",
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器  http://172.16.1.12:7071/rest/mcdPhoneBar/
        hotOnly: true, // 热更新
        // proxy: 'http://localhost:8000'   // 配置跨域处理,只有一个代理
        proxy: { //配置自动启动浏览器
            "/api": {
                target: "http://localhost:8080",
                pathRewrite: {
                    '^/api': '/mock'
                }
            },
        }
    },
};

其他的配置选项，可以参考官网文档：vue.config.js文档

原文链接：Vue 3.x 项目搭建教程

欢迎大家访问我的博客：bigyoung.cn

欢迎大家关注我的公众号：

公众号二维码.jpg