精华内容
下载资源
问答
  • vue项目打包后无法正常显示,vue项目引用element-ui中的图标无法显示

    问题说明

    Vue项目 builder 后直接用浏览器打开 dist 文件下的 index.html 直接就是白屏内容无法显示,F12 打开控制台,发现:

    • static文件夹下的 js, css 静态资源文件404找不到
    • static文件夹下的图片找不到
    • 引用element-ui的图标找不到

    原因:

    • 静态文件js css 找不到
    • 项目中引用eleemnt-ui的图标找不到

    解决方案

    • 配置config文件夹下的index.js 配置文件,将assetsPublicPath属性由 / 改为 ./
      在这里插入图片描述

    • 配置build文件夹下的utils.js文件找到以下这段代码,加上publicPath属性为’…/…/'这样引用 element-ui 中的字体图标就能找到了
      在这里插入图片描述

    • 注意点:要想让静态资源顺利被打包,引用路径一定要正确,当我们引用 static 下的静态文件时不要带 / 前缀,否则会无法被webpack识别导致无法正确打包
      错误:href = “/static/favicon.ico”
      正确:href = “static/favicon.ico”
      不要带/ webpack会识别static,打包时自动按照index.js 配置文件中配置的 ./ 自动为其加上

    展开全文
  • VUE 打包文件压缩

    2021-08-24 15:54:16
    vue.config.js 内 const CompressionPlugin = require("compression-webpack-plugin") module.exports = { configureWebpack: { // webpack plugins plugins: [ //提供带 Content-Encodi.
    1. 安装插件
    yarn add compression-webpack-plugin@5.0.1
    
    1. vue.config.js
    const CompressionPlugin = require("compression-webpack-plugin")
    
    module.exports = {
        configureWebpack: {
            // webpack plugins
            plugins: [
                //提供带 Content-Encoding 编码的压缩版的资源
                new CompressionPlugin({
                    algorithm: "gzip",
                    test: /\.js$|\.html$|\.css/, // 匹配文件名
                    // test: /\.(js|css)$/,
                    threshold: 10240, // 对超过10k的数据压缩
                    deleteOriginalAssets: false, // 不删除源文件
                    minRatio: 0.8, // 压缩比
                }),
            ],
        },
        publicPath: "./", //打包路径
        productionSourceMap: false,
    }
    
    展开全文
  • vue打包部署文件可继续修改内容?

    热门讨论 2021-06-07 15:18:33
    今天在公司豆芽接了一个需求,就是打包部署之后...在vue项目文件的puclic新建static/configuration.js(静态文字配置文件) configuration.js //configuration自己定义名字 //window对象添加自定义属性,供项目使用 win

    今天在公司豆芽接了一个需求,就是打包部署之后,我们可以操作修改页面的静态文字内容,并且在页面生效(不重新打包情况下),那么豆芽一接到这个需求的时候,立马想到将所有的静态文字内容,放入一个配置js中,修改文字内容我们直接修改这个配置js就可以了。这样想一想可行,在这里分享一下,欢迎一起交流不一样的方法,直接上代码。
    那么首先在vue项目文件的puclic新建static/configuration.js(静态文字配置文件)

    configuration.js

    //figuration自己定义名字
    //window对象添加自定义属性,供项目使用
    window.configuration = {
        username: '曹豆芽'
    }
    

    项目引入js

    在这里插入图片描述
    页面使用

    <template>
      <div id="home">
        <p>{{ stringData }}</p>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          stringData: "",
        };
      },
      mounted() {
        this.stringData = window.configuration.name;//读取window对象赋值
      },
      created() {},
    };
    </script>
    
    <style lang="scss">
    </style>
    

    在这里插入图片描述这个时候我们可以看到是正常使用的

    现在我们进行正常打包,得到以下文件。
    在这里插入图片描述
    这个时候我们可以直接本地运行,这个时候我们运行项目想要一个环境。这里的话我使用vcode去运行打包之后的文件,也可以安装http-server去运行。

    在这里插入图片描述

    在这里插入图片描述

    这个时候我们去修改dist/static/configuration.js文件的内容,我们发现页面会直接改变。达到我们需要的效果。
    在这里插入图片描述

    在这里插入图片描述
    这个是豆芽想的一种方法,有不一样的想法和方法,欢迎和豆芽交流。🙏🏿🙏🏿🙏🏿🙏🏿🙏🏿

    展开全文
  • 1、背景常规的vue项目分为本地...如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效。那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢?2、可选方案进行了调研后,网上介绍的方案有...

    1、背景

    常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可。但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的。如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效。那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢?

    2、可选方案

    进行了调研后,网上介绍的方案有2种:

    1)在static上设置一个config.js,把配置的参数设置成 window 下的全局变量。这种方案的确可行,但是,但是,不安全!!! 如果请求地址被恶意修改,后果不太好~

    2)使用 generate-asset-webpack-plugin 插件,配置一大坨后生成一个静态文件,然后通过请求的方式,获取需要的数据,这种方法可以解决安全性问题,但是,但是,有点小麻烦啊~

    因此,博主根据实际项目,将两种方法结合在一起,形成了一个中和的方案。

    3、执行方案

    配置步骤

    第一步:在 static 文件夹中新建一个 config.json,把你要写的配置写入

    {

    // 基本访问地址

    "BASE_URL": "http://webhmy.com"

    }

    放在static下的文件,可以被直接访问。

    第二步:在 main.js 中请求定义的配置文件,并放到 Vue.prototype 中,使全局可访问,注意,这里把new Vue()放在请求里执行,是防止请求与页面渲染之间的时间差异化导致值获取不到,因此这样比较保险。

    // 定义外部接口可配置

    import axios from 'axios'

    let startApp = function () {

    axios.get('/static/config.json').then((res) => {

    // 基础地址

    Vue.prototype.BASE_URL = res.BASE_URL;

    new Vue({

    el: '#app',

    router,

    store,

    components: {

    App

    },

    template: ''

    })

    })

    }

    startApp()

    第三步:如果在 .vue 文件中使用:

    console.log(this.BASE_URL)

    // http://webhmy.com

    如果在一些 .js 文件中,可以调用Vue后再使用:

    import Vue from 'vue'

    console.log(Vue.prototype.BASE_URL)

    // http://webhmy.com

    打包修改

    执行 npm run build 可以看到打包文件夹 static 文件夹下的 config.json,之后可以修改配置,刷新页面即可。

    【补充】

    因为请求和打包操作的时差性,哪怕它是请求本地的文件,但是有时发现它的请求会比我们系统的第一个请求慢了,这个时候就会失效。

    解决方法:相信我们的项目中都对请求进行了一些封装操作,只要将对应的baseURL的值改成实时获取Vue.prototype.BASE_URL的值,就可以保证接口请求能够准确获取到了~

    展开全文
  • vue 简介Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。vue是目前...
  • 查看是否存在vue.config.js 文件, 如果不存在就百度一下,怎么添加vue.config.js 文件 然后在vue.config.js文件中添加配置 module.exports = { chainWebpack: config => { if (process.env.NODE_ENV === '...
  • 1、背景常规的vue项目分为本地...如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效。那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢?2、可选方案进行了调研后,网上介绍的方案有...
  • 问题1在我的项目中遇到的情形是:打包后,css里加载的font文件路径变成了:rootpath/static/css/static/fonts,而期望的应该是rootpath/static/fonts。修改方式:在build/utils的ExtractTextPlugin.extract里加上 ...
  • 最近用vue做一个项目,刚开始没想到后台用的微擎,不能前后端完全独立。...打包出来文件又不能修改,导致项目中调用的静态文件总是404。既然不能改项目中的路径,那就改打包的路径,模拟服务器存储...
  • ​​​​​​​
  • 因此许多前端会选择直接使用Nginx来帮助我们进行静态文件的资源管理,而Vue项目经过build过后,产生的静态文件(js+html+js)等文件,都可以放在nginx里面进行托管。对于history模式的vue项目,在build时,务必将 ...
  • 问题吾辈使用 vue-cli 直接生成的 vue 模板项目,在模板之上继续开发的。然而在使用 npm run build打包项目时,却发现打包好的项目在浏览器中直接打开好像什么都没有?原因查看了一下打包后的 index.html 源码,终于...
  • 常规的vue项目分为本地开发环境和生产环境,在实际项目中,我们在打包之前在.env文件中进行地址配置然后进行打包vue.config.js文件在开发环境中有效,打包后无效),但在部署过程中地址是不固定的,那么就需要进行...
  • vue项目打包文件增加hash值

    千次阅读 2020-12-29 01:09:28
    vue项目打包文件增加hash值vue-cli2项目修改vue项目根目录下的 build/webpack.prod.conf.js文件js文件:output: {path: config.build.assetsRoot,filename: utils.assetsPath('js/[name].[chunkhash].js'),...
  • 起因在vue文件打包后,项目脱离了vue配置的...此时我们可以利用nginx处理跨域,其实vue配置也是利用的这个nginx处理vue打包文件后的跨域问题安装先在官网下载nginx 注意版本 运行的环境 我这里用的是windows 然后...
  • vueproject打包操作npm buildvue project打包之后默认在dist目录下编译生成静态资源如果想在正式部署前测试,可以依赖node-static直接运行安装node-static依赖npm install -g node-static或者编写node脚本在根目录下...
  • [vue] 怎么修改vue打包后生成文件路径? webpack:output.path vue-cli3: outputDir 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端...
  • vue-cli 的版本为 4.0.4image.png使用下面的命令将npm run build将打包生成的dist文件夹, 放在服务器中, 浏览器访问, 发现访问成功,但是页面是空白的,可尝试以下解决方法出现这种情况要分两个处理方式(vue-cli2点...
  • 当有多个附件时,前端是如何实现附件的打包下载的呢,首先需要安装两个插件,来实现 1.安装file-saver和jszip npm install file-saver npm install jszip 2.安装成功之后,在我们需要打包下载的页面引入 ...
  • 打包本地文件注意点 1、vue.config.js 里面配置的 publicPath 基本路径需要是当前路径 ./ 2、router 的模式需要时 hash 模式,使服务文件不需要依赖静态服务器 const router = new VueRouter({ mode: "hash", base...
  • 如何在nginx中部署静态资源就不描述了, 请看我的这篇博客将vue脚手架项目打包后的静态文件放到nginx上, 发现有个问题, 即url上有#, 怎么去掉这个#呢.1 项目中router的mode路由的mode要为history, 如下List-1.1所示...
  • 修改文件 _/config/index.js_,将 build.assetsPublicPath 属性的值由 / 改为 ./ 修改文件 _/build/utils.js_,在插件 ExtractTextPlugin 中添加 publicPath: '../../'
  • [vue] vue打包成最终的文件有哪些? vendor.js, app.js, app.css, 1.xxx.js 2.xxx.js 如果有设置到单独提取css的话 还有 1.xxx.css ...... 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持...
  • vue打包后,本地测试运行dist文件 第一步:安装服务 npm i -g serve 第二步:进入打好包的dist文件夹 cd dist 第三步:运行 serve 结果: 浏览器输入访问即可
  • 在vue中未使用到的静态资源文件,例如:引用在index.html的js的(此处不知为何,vue打包认为其为未引用),后端返回才引用到的图片等文件。 目前只涉及到此两类,后续再补充。 打包时static中的文件不会一起拷贝到...
  • 2.在dhango项目中新建文件夹,frontend(用来存放前端代码),将vue打包的dist目录的文件放到里面,包括static静态文件 3.修改setting主要配置文件 第一处: TEMPLATES = [ { 'BACKEND': 'django.template....
  • 每次打包更新版本发到服务器上,导致偶尔会出现不能即使更新最新代码,浏览器存在缓存的问题。解决方法:找到webpack .prod.conf.js1.定义版本变量: const Version = new Date().getTime(); // 这里使用的是时间戳 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,332
精华内容 27,732
关键字:

vue打包出来的文件

vue 订阅