vue-cli webpack 打包后 index.html文件 引用缺少引号

最新推荐文章于 2022-09-08 12:18:27 发布
原创 最新推荐文章于 2022-09-08 12:18:27 发布 · 2.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了解决Webpack打包后，HTML中JS和CSS引用路径引号被移除的问题。通过调整webpack.prod.conf.js配置文件中的minify参数，将removeAttributeQuotes设置为false，确保HTML文件正确引用资源。

webpack 打包后 打开index.html文件 发现引用文件的引号都被过滤了

<script type=text/javascript src=./static/js/js/app.js></script>

因此，需要在webpack.prod.conf.js 找到minify参数

讲 removeAttributeQuotes: true 改为  removeAttributeQuotes: false (如果该方法没有用那就把整个minify去掉再试一下）

再次 build之后，就会看到 index.html 中的css和js添加了引号

解决vue项目打包后index.html标签属性没有双引号的问题
wjlhanhan的博客
11-01 2839
记录一个vue项目打包时的大坑，因为需要在index.html里加入一些自定义的东西，结果打包后相关属性都没有双引号，最后各种百度谷歌终于解决了，哈哈（我用的vue-cli4） vue-cli4配置和低于4的配置有些不同，4只用一个vue.config.js基本就行了 1.百度上搜索的有些人这么解决的（vue-cli4以下） 找到webpack.prod.conf.js文件，加上removeAttributeQuotes: false; new HtmlWebpackPlugin({ filen
Vue2.x打包出来的indexhtml中css和js的引用路径少了一个点，导致在静态图片也不能读写出来
社会人
08-22 803
Vue2.x打包出来的indexhtml中css和js的引用路径少了一个点，导致在静态图片也不能读写出来 这个问题实际很简单 废话不多说直接找到这个目录在前面加上一个点 ,原来是没有点的 assetsPublicPath: ‘/’,下面的截图为加上的 还有使用elementUI时，使用字体图标 打包出来图标不显示 直接看截图 简单粗暴易懂，如果你是看到这篇文章解决了问题的，请点个赞，就是继续写...
在vue项目npm run build后，index.html中引入css和js 报MIME type问题
weixin_30567225的博客
01-15 1232
问题： 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容：because its MIME type ('text/html') is not a supported stylesheet MIME type2.控制台报错：报错内容：http://127.0.0.1:5500/static/css/app.04f4671...
vue build text html,在vue项目npm run build后，index.html中引入css和js 报MIME type问题
weixin_32596893的博客
06-17 850
问题：1.在vue项目中,build打包后,index页面打开会报错, MIME type (‘text/html‘) ;报错内容：because its MIME type (‘text/html‘) is not a supported stylesheet MIME type2.控制台报错：报错内容：http://127.0.0.1:5500/static/css/app.04f46711e...
vue.js 打包时出现空白页和路径错误问题及解决方法
12-12
vue-cli输入命令：npm  run  build 即可打包vue.js的项目  打包出来后项目中就会多了一个文件夹dist，下图为我们打包过后的项目 我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。 解决：到config文件夹中打开index.js文件。 文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性： assetsPublicPath属性作用是指定编译发布的根目录，‘/’指的是项目的根目录 ，’./’指的是当前目录。 总结 以上
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
12-10
本篇文章将详细介绍如何利用 Vue CLI 自动打包并生成配置文件，以提高开发效率和灵活性。 首先，我们要解决的是配置文件的自动化生成。在描述中提到，项目实施时经常需要更改交互的地址等配置信息，这导致频繁打包...
vue-cli中的webpack配置
心暖未晴
10-24 899
https://segmentfault.com/a/1190000008779053 版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │   ├── build.js │   ├── check-versions.js │   ├──
精选资源
解决在vue项目中webpack打包后字体不生效的问题
01-19
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图： 打开控制台查看元素样式，发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号， 但使用...
>> npm run dev vue-project\src> > vue-project@0.0.0 dev > webpack-dev-server --mode development --open --config build/webpack.dev.conf.js [webpack-cli] Failed to load 'D:\森林退化\vue-project\build\webpack.dev.conf.js' config [webpack-cli] Error: Cannot find module 'D:\森林退化\vue-project\build\webpack.dev.conf.js' Require stack: - D:\森林退化\vue-project\node_modules\webpack-cli\lib\webpack-cli.js - D:\森林退化\vue-project\node_modules\webpack-cli\lib\bootstrap.js - D:\森林退化\vue-project\node_modules\webpack-cli\bin\cli.js - D:\森林退化\vue-project\node_modules\webpack-dev-server\bin\webpack-dev-server.js at Function._resolveFilename (node:internal/modules/cjs/loader:1365:15) at defaultResolveImpl (node:internal/modules/cjs/loader:1021:19) at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1026:22) at Function._load (node:internal/modules/cjs/loader:1175:37) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:235:24) at Module.require (node:internal/modules/cjs/loader:1445:12) at require (node:internal/modules/helpers:135:16) at WebpackCLI.tryRequireThenImport (D:\森林退化\vue-project\node_modules\webpack-cli\lib\webpack-cli.js:225:30) at loadConfigByPath (D:\森林退化\vue-project\node_modules\webpack-cli\lib\webpack-cli.js:1390:38) { code: 'MODULE_NOT_FOUND', requireStack: [ 'D:\\森林退化\\vue-project\\node_modules\\webpack-cli\\lib\\webpack-cli.js', 'D:\\森林退化\\vue-project\\node_modules\\webpack-cli\\lib\\bootstrap.js', 'D:\\森林退化\\vue-project\\node_modules\\webpack-cli\\bin\\cli.js', 'D:\\森林退化\\vue-project\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js' ] }
最新发布
11-22
我们面对的问题：运行 'npm run dev vue-project\src' 时出现错误，提示 webpack-cli 无法加载 'D:\森林退化\vue-project\build\webpack.dev.conf.js' 配置文件。 根据引用[1]和引用[2]的信息，我们可以知道： - ...
vue项目如何打包问题遇到得坑及其总结
weixin_43550660的博客
11-25 1636
vue项目如何打包问题遇到得坑及其总结 如何打包 基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以直接将这两个文件扔到服务端 但有时候，我们会直接将dist文件扔到服务端 出现的问题 打包到服务器后，出现资源引用路径的问题 打包到服务器后，出现空白页...
Vue2安装、项目创建及项目启动出错时的解决方法
ling08140814的博客
07-22 8787
Vue2安装 1、以管理员身份打开命令窗口。 2、输入node -v，检查Node.js是否安装成功。 3、国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 npm install -g cnpm --registry=https://registry.npm.taobao.org 输入npm -v，检查npm是否安装成功。 4、安装wekpack npm install webpack –g 5、安装脚手架 npm install vue-cli -g 6、输入vue -V，检
原生Webpack的html-webpack-plugin配置js,css
Meta.Qing的博客
09-08 1576
原生webpack如何从外部引入js和css呢?webpack.config.js 配置。index.html代码。
Vue路由跳转后 Index.html中引入的JS文件失效 问题解决
杨杨吖的博客
03-12 5113
原因：Vue路由跳转JS失效原因: 路由跳转后，当时JS不会重新加载。 解决方法：看下图代码： // 动态加载js文件 const jsArr = ["/static/vendor/bundle.js", "/static/dist/js/app.min.js"]; const head = document.getElementsByTagName("head")[0]; for(let i=0; i<jsArr.length; i++) { const script = do
vue index.html引入js报错,vue如何引用其他组件(css和js)
weixin_42317885的博客
06-15 2653
1.vuejs组件之间的调用components注意：报错Do not use built-in or reserved HTML elements as component id:修改组件的名字，例如不能使用address为组件名字组件名字不要使用内置的或保留HTML元素为组件id，App.vue是一个入口，vue必须注册才能使用 2.vue引入外部的css，放在和引入vue的位置一样./代表当...
vue打包后index.html界面报错
diaobiteng1128的博客
01-25 1119
vue项目完成后，打包放到服务器上，打开index.html页面时发现一片空白并且报错 很明显是js和css引用不到。 解决办法： 修改vue项目config文件夹下面的index.js,将assetsPublicPath:'/'改为assetsPublicPath:'./' 转载于:https://www.cnblogs.com/luyuefeng/p/8350573....
vue项目解决打包后index.html里面的引入文件没有引号问题总结
cabinx的博客
12-10 1526
vue项目解决打包后index.html里面的引入文件没有引号问题总结 1.业务需求： vue项目打包后，index.html里面的引入文件没有引号，导致打包后的项目不能正常运行。 2.解决方案： 在项目找到vue.config.js文件，然后添加如下代码： chainWebpack: config => { config.plugin('html').tap(args => { args[0].minify=false return ar
【vue】在index.html引入js文件失效解决方法
热门推荐
hggl_bera的博客
05-08 1万+
在static文件夹下写了一个config.js配置文件，但是引入后报错，提示没找到该文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg...
最全webpack知识点（二）
yangyanqin2545的博客
01-06 393
webpack知识点（二） 1、自定义的json模块parser json5是对json的升级，在它里面不仅可以加注释，而且key也不需要双引号，值的话也可以使用单引号，并且值还可以使用类似于/n/r等等这样的一些转义字符 npm install toml yaml json5 -D 在webpack.config.js文件中做如下配置 const toml = requuire('toml'); const yaml = require('yaml'); const json5 = require('j
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值