前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue3.X中的一些变化

Vue3.X中的一些变化

作者头像
BigYoung小站
发布2020-05-06 16:08:13
4070
发布2020-05-06 16:08:13
举报
文章被收录于专栏:BigYoung小站

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

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

一、Router变化:

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

配置如下:

代码语言:javascript
复制

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

配置如下:

代码语言:javascript
复制

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

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

代码语言:javascript
复制

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

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

代码语言:javascript
复制

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-02-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 BigYoung小站 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、Router变化:
  • 二、static变化
  • 三、vue.config.js变化
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档