vue.config.js文件作用

vue-cli3以前有build、config目录,可以设置vue运行时参数,vue-cli3开始可以在vue.config.js文件内设置。
vue.config.js文件位置:位于根目录下
在这里插入图片描述
官网关于vue.config.js的地址
文件格式

module.exports = {
  // 选项...
}

默认选项

publicPath

部署应用包时的基本 URL。
默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。
这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。
应用场景:
1.vue项目打包成html,在本地点击直接能打开。
此时根据vue-cli版本修改不同的值。
(1)vue-cli 2.x版本
在config文件夹下的index.js中修改 assetsPublicPath: ‘./’
(2)vue-cli 3.x版本
在 cli3 中 assetsPublicPath 属性被 baseUrl 取代,只需要在vue.config.js 添加baseUrl 属性 设为 ‘./’ 即可。
(3)vue-cli 4.x版本
与cli3相同都是修改 vue.config.js 文件 ,但将属性换为 publicPath:’./’

module.exports = {
   publicPath: './'
}

之后修改路由模式,以默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载(路由地址都是以"#"形式展示)。

/* 创建路由对象 */
const router = new VueRouter({
  /*去掉访问地址#*/
  // mode:"history",
  routes
})
Logo

前往低代码交流专区

更多推荐