VUE开发遇到的问题总结

最新推荐文章于 2022-12-15 11:22:00 发布

都没你能

最新推荐文章于 2022-12-15 11:22:00 发布

阅读量932

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/jerry_0_0/article/details/107381322

版权

1.打包时图片加载路径的问题

当项目完成时包之后发现登录界面背景图片没有加载出来，以为是图片没有打包上，后来发现是图片的路径不正确。

打包命令

npm run build

问题解决方法

在build文件夹下的utils.js文件里添加一行代码即可。
在这里插入图片描述
插入的代码

publicPath: '../../',

2.vue组件的引用

使用步骤：

1.引入组件

import Import from './import.vue'

2.注册组件

components: {
	Import,
},

一定要注册组件（自己用的过程中忘记注册组件报错了好一顿找）

3.使用组件

<Import></Import>

3.修改网页图标以及标题

1.修改文件的位置在根目录文件下，index.html

在这里插入图片描述

2.修改，添加

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>你的标题</title>
	<link rel="icon" href="/static/favicon.ico" /> //展示的图片
	/*图片一定要放到static文件夹下*/
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

运行项目提示 Warnings while compiling. 警告

在这里插入图片描述
打开webpack.base.conf.js

注释掉：// …(config.dev.useEslint ? [createLintingRule()] : []),

然后重启项目就可以了。

vue 打包之后界面空白，控制台报错

在这里插入图片描述

问题解决方法：

在这里插入图片描述
保存重新打包就可以了。

未完待续…

都没你能

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE开发遇到的问题总结

1.打包时图片加载路径的问题当项目完成时包之后发现登录界面背景图片没有加载出来，以为是图片没有打包上，后来发现是图片的路径不正确。打包命令npm run build问题解决方法在build文件夹下的utils.js文件里添加一行代码即可。插入的代码publicPath: '../../',2.vue组件的引用使用步骤：1.引入组件import Import from './import.vue'2.注册组件components: { Import,},一定要注册组件
复制链接

扫一扫