vue-cli2.x版本打包修改公用路径及配置

简介: vue-cli2.x版本打包修改公用路径及配置

最近被催更了。为了不辜负仅有的几个粉丝的期望,我赶紧趁着今天下班早整理一下。
话不多说,直接正题。由于时间紧迫。相信想看这篇文章的小伙伴,也对Vue2和vue-cli2.0有了一定了解。我就直接跳过项目搭建步骤,直接讲重点。

下面是vue-cli3.0 的文章的地址以及2.x版本的demo

vue-cli3.0
vue-cli2.x --demo

项目依赖

添加axios 插件

npm install --save axios

然后项目中使用,在main.js中添加下面代码

import axios from 'axios'

开始关键的步骤

1.在static目录下添加serverConfig.json文件
serverConfig.json

2.在serverConfig.json文件中添加需要的字段
serverConfig.json

3.在main.js中添加下面的代码

// 请求文件内容
function getServerConfig () {
  return new Promise((resolve, reject) => {
    axios.get('./static/serverConfig.json').then(result => {
      console.log(result)
      let config = result.data;
      for (let key in config) {
        Vue.prototype[key] = config[key];
      }
      resolve();
    })
  })
}
// 请求文件内容及创建实例
async function main () {
  await getServerConfig();
  new Vue({
    el: '#app',
    router,
    template: '<App />',
    components: { App }
  })
}
// 方法初始执行
main();

此时查看浏览器控制台,就得到你想要的了,想做其他操作你就可以随(为)(所)(欲)(为)了O(∩_∩)O哈哈~
控制台

最后关于打包

直接npm run build 就可以了。因为static文件夹下的一些文件格式已经默认不被打包。不会出现访问不到的问题了。

备注

如果再出现访问不到的话,则需要在webpack.base.conf.js 里面对生产环境和开发环境的路径进行修改即可。

最后的最后如果对你有帮助或者喜欢本文的话,请点个小心加个关注鼓励我一下ლ(°◕‵ƹ′◕ლ)。持续关注我会有小惊喜哦,让我们一起成长!!!(注:如需转载请注明来源)
相关文章
|
1月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
2月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
115 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
470 4
|
2月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
49 3
|
2月前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
469 0
|
3月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
3月前
|
JavaScript
Vue3基础(20)___Vue3配置错误路由重定向写法
本文介绍了Vue 3中配置错误路由重定向的正确写法,包括使用参数和自定义正则表达式来定义通配符路由。
59 0
Vue3基础(20)___Vue3配置错误路由重定向写法
|
2月前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
35 0
|
4月前
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
1319 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
4月前
|
JavaScript
在Vue中使用Avue、配置过程以及实际应用
这篇文章介绍了作者在Vue项目中使用Avue组件库的体验,包括安装配置过程和实际应用示例,展示了如何通过Avue实现动态增加输入框和输入验证的功能。
在Vue中使用Avue、配置过程以及实际应用