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 里面对生产环境和开发环境的路径进行修改即可。

最后的最后如果对你有帮助或者喜欢本文的话,请点个小心加个关注鼓励我一下ლ(°◕‵ƹ′◕ლ)。持续关注我会有小惊喜哦,让我们一起成长!!!(注:如需转载请注明来源)
相关文章
|
2月前
vue3-admin-element-template配置正向代理报错
vue3-admin-element-template配置正向代理报错
45 0
|
2月前
|
移动开发 JavaScript 安全
Vue 应用程序性能优化:代码压缩、加密和混淆配置详解
Vue 应用程序性能优化:代码压缩、加密和混淆配置详解
72 0
|
2月前
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.
81 0
|
2月前
|
资源调度 JavaScript 前端开发
Vue的路由管理:VueRouter的配置和使用
【4月更文挑战第24天】VueRouter是Vue.js的官方路由管理器,用于在单页面应用中管理URL路径与组件的映射。通过安装并引入VueRouter,设置路由规则和创建router实例,可以实现不同路径下显示不同组件。主要组件包括:`&lt;router-link&gt;`用于创建导航链接,`&lt;router-view&gt;`负责渲染当前路由对应的组件。此外,VueRouter还支持编程式导航和各种高级特性,如嵌套路由、路由参数和守卫,以应对复杂路由场景。
|
24天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
41 1
|
3天前
|
JavaScript
|
24天前
|
JavaScript
|
3天前
|
JavaScript 前端开发
|
2月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【4月更文挑战第22天】Vue.js的官方路由管理器Vue Router简化了单页面应用的路由管理。通过定义路由组件和映射URL,它实现了页面导航和组件加载。安装Vue Router后,在`src/router/index.js`配置路由,如`{ path: &#39;/&#39;, component: Home }`。使用`&lt;router-view&gt;`渲染组件,`&lt;router-link&gt;`进行导航。动态路由匹配允许同一个组件对应不同URL。嵌套路由和编程式导航进一步增强路由功能。路由守卫可在路由切换时执行逻辑,而路由懒加载能按需加载组件,提升性能。
|
2月前
|
缓存 监控 JavaScript
环境搭建:Vue项目的开发环境和生产环境配置
【4月更文挑战第23天】本文指导Vue开发者配置开发和生产环境,强调了两者目的和特点。开发环境用于编写、测试和调试,侧重快速反馈和调试工具;生产环境注重稳定性、效率和安全性,需进行代码优化、错误处理和日志监控。配置步骤包括安装Node.js和npm,使用Vue CLI,配置Webpack、热重载和源码映射。生产环境要实现代码分割、压缩、最小化,启用CSP、HTTPS,优化静态资源和缓存策略。环境配置应随项目发展和技术进步持续优化。