【原创】Vue3.0中的一些变化

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

一、Router变化：

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

配置如下：

Python

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 }] })

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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 文件中配置

配置如下：

Python

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 }] })

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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中就可以了

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

Python

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

1 2 3

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文件的，需要你手动创建

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

Python

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' } }, } }, };

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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文档

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

如果觉得有用，麻烦您点击一下『好看』，这是我努力的源泉！

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