精华内容
下载资源
问答
  • ant-design-pro-vue 打包问题

    千次阅读 热门讨论 2019-05-23 09:14:08
    由于以前一直使用iview,使用iview的...结果没想到打包时出了问题。 通过标题可以知道我使用的脚手架是ant-design-pro-vue,这个脚手架采用的vue-cli3.0。 下面说说遇到的问题,由于没有仔细看过vue-cli3.0的...

           由于以前一直使用iview,使用iview的脚手架一直没出过什么问题。所以当知道antd出vue版后,在新项目的原型使用了一下,一开始启动,修改都很愉快。结果没想到打包时出了问题。

            通过标题可以知道我使用的脚手架是ant-design-pro-vue,这个脚手架采用的vue-cli3.0。

            下面说说遇到的问题,由于没有仔细看过vue-cli3.0的问题,同时ant-design-pro-vue脚手架也没有特别说明,想当然的以为打完包就可以直接打开。结果打完包你就会看到这种情况。

      项目会一直转圈圈,无法正常打开。通过读vue-cli3.0文档发现是因为没有配置publicPath的原因。不配置的情况下项目只能通过web容器打开无法通过file://打开,于是加入publicPath:'./'后项目可以正常打开。但会出现第二问题由于ant-design-pro-vue的路由默认采用history模式,这会导致你后续页面都是找不到的。所以修改为hash模式。

       总结:

                如果你想打包成dist后直接打开需要做以下几点:

                 1. 在vue.config.js加入publicPath:'./'

                 2. 修改router.config.js中的mode,直接去掉即可。

                 3. 如果还想使用mock虚拟数据你应该修改.env中的判断条件VUE_APP_PREVIEW=false改为true。

     

     

     

    展开全文
  • 这里以vue-cli创建的项目为例 1、文件路径不对 找到config文件夹下的index.js...以上这篇解决Vue打包之后文件路径出错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 下面小编就为大家分享一篇解决vue打包之后静态资源图片失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了 解决Vue打包后访问图片/图标不显示的问题,本文给大家介绍的非常详细,具有一定的参考解决价值,需要的朋友可以参考下
  • 在本篇文章里小编给各位整理的是关于Vue打包后访问静态资源路径问题相关知识点,需要的朋友们学习下。
  • 首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } ...
  • 下面小编就为大家分享一篇解决vue build打包之后首页白屏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了修改Vue打包后的默认文件名操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue动画打包后失效问题的解决方法,在文中给大家提到了vue-cli 打包后自定义动画未执行的解决方法,需要的朋友可以参考下
  • 很久没有使用Vue进行开发了,最近用Vue进行开发后发现打包环节 生成的文件夹dist中没有了index.html,打包也没有报错,求解。
  • 在使用vue-cli脚手架打包后(UI用的Element-ui),发现vendor文件很大,将近1M左右。。后来翻阅资料才明白,原来webpack把所有的库都打包到了一起,导致文件很大。 我的解决办法:  1、把不常改变的库放到index....
  • 大家都知道,Vuejs的 CLI工具 是基于 webpack 来实现的,所以在项目打包后,会生成的文件会很大。主要原因是 webpack 将我们所有文件都打包成一个js文件,即使再小的项目,打包之后...下面讲讲最近我遇到的相同问题
  • 主要介绍了解决vue项目打包后提示图片文件路径错误的问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <。 怪点一是开发环境没有问题,只有生产环境有问题,怪点二是只有一个页面有问题...
  • 今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家 打包之后打开dist的页面显示空白: 这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况 1、记得改一下...
  • 这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后 (我使用的是vue-cli 3.*版本) 在项目文件夹下创建一个 vue.config.js module.exports ...
  • vue打包部署nginx 配置

    2018-01-24 11:58:53
    vue开发完毕,打包之后上线,传到nginx服务器配置问题解决
  • 主要介绍了解决webpack vue 项目打包生成的文件,资源文件报404问题的修复方法,需要的朋友可以参考下
  • 今天小编就为大家分享一篇解决vue脚手架项目打包后路由视图不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了解决vue+elementui项目打包后样式变化问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue-cli 初始化vue项目构建 vue init webpack project-name electron 配置源码: 1. git clone https://github.com/electron/electron-quick-start** 2. 找到clone下来的项目入口文件main.js 和 package.json ...
  • 主要介绍了Vue项目打包部署到iis服务器的配置方法,文中通过代码示例给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 问题一:使用的element或iview框架图表不显示 目录 问题一:使用的element或iview框架图表不显示

    问题一:使用的element或iview框架图表不显示

    这种问题往往是开发的时候显示正常,但是一打包就发现图表不显示了,此时我们应该找到我们vue工程目录里的build文件下的untils.js ,添加:publicPath: '../../' , 如下图所示:

     

    问题二:打包后的工程的图片文件不能正常显示,提示图片文件找不到

    图片不能显示,那就说明项目打包后,图片文件相对路径不对,此时找到config里面的index.js,在build模块下加入assetsPublicPath: './', 如下图所示:

     

    问题三:vue-cli项目打包后router-view中的内容不显示问题

    vue项目打包后得到dist文件,我们直接打开dist文件下的index.html文件后发现页面是空白的,此时问题往往都是因为我们在router中设置了mode:'histroy', 如下图:

    原因说明:不是说不能打开这个模式,而是开启这个模式需要后端设置的配合,在没有后端配合的情况下可以设置mode:hash (vue-router默认hash模式)

     

    问题四:vue打包后的dist文件在IE浏览器中打不开(空白页面)

    1.下载安装 babel-polyfill,执行命令语句:

    npm install babel-polyfill --save-dev

    看到版本号之类的信息后表示安装成功:

    安装成功之后在我们的vue工程的最外层的 package.json中有了这个依赖包,如下图:

    2.前面我们安装好了babel-polyfill,现在我们需要将其引入到我们的vue工程中应用,在我们的vue工程下的src文件中找到main.js并引入babel-polyfill,如下图所示:

    3.打开我们的build 文件下的webpack.base.config.js,将entry中的app: './src/main.js’配置改为:app: [‘babel-polyfill’, ‘./src/main.js’];如下图所示:

    如此一来就解决了在ie浏览器中打开页面是空白的问题了。


    展开全文
  • vue + ant design vue 项目打包优化

    千次阅读 2020-12-22 12:28:56
    注释掉 vue 和 antdv Vue.use(antd); 这句话一定不能删除 antd 变量虽然没有定义,但是,是cdn资源里面的模块,一定要引入进来 // The Vue build version to load with the `import` command // (runtime-only or ...

    废话不多说,直接上代码

    main.js

    注释掉 vue 和 antdv
    Vue.use(antd); 这句话一定不能删除

    antd 变量虽然没有定义,但是,是cdn资源里面的模块,一定要引入进来

    如果提示 antd 未定义可能是 cdn 资源问题,
    参考 : https://blog.csdn.net/qq_31254489/article/details/113097548


    参考代码:

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import App from './App'
    // import Vue from 'vue'
    // import antd from 'ant-design-vue';
    // import 'ant-design-vue/dist/antd.css';
    import router from './router'
    
    Vue.config.productionTip = false
    Vue.use(antd);
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    

    webpack.base.conf.js

    其实完全不需要修改 webpack 配置,网上一堆说使用 externals 的,其实不用,直接注释掉 import 就行了

    index.html

    引入3个cdn

      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      <link href="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.min.js"></script>
     
    
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title>ocs-helper</title>
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      <link href="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.min.js"></script>
    </head>
    
    <body>
      <div id="app"></div>
      <!-- built files will be auto injected -->
    </body>
    
    </html>
    

    打包

    npm run build

    没有优化前

    在这里插入图片描述

    优化后

    在这里插入图片描述

    展开全文
  • 主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了解决vue cli使用typescript后打包巨慢的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 默认情况下以当前域名为根目录向下访问。...默认情况下该值为’/’(该属性目测是webpack打包时的文件引用路径的基础路径)。 2、修改路由base属性为’/catalog1/catalog2/’,如下: export default new Router({

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 87,609
精华内容 35,043
关键字:

vue打包问题

vue 订阅