main.js引入css，mainjs引入scss文件报错

vue+webpack+element打包后线上样式不一致

vue中我们经常会使用一些第三方的组件库，可以达到快速搭建项目界面布局的效果，无非就是用什么组件库的问题。 但是，不管我们使用element ui、vuetify或是别的什么组件库，修改样式是必不可少的一个工作。

webpack提供了生产环境和线上环境的两种配置文件，平时开发当中使用一个接口，项目上线后就会自动切换成另外一个接口，废话不多说，下面上图。

项目打包后路径错误导致404。webpack打包以后，在dist文件中生成一个static的目录和一个index.html，会默认把图片路径改为static/img，这样的路径错误的取不到图片。

检查依赖版本：确保项目依赖的elementui版本与vuejs版本兼容，依赖版本不匹配，会导致某些功能无法正常工作。检查打包配置：使用的是webpack或者别的打包工具，需要检查打包配置。

这个问题可能是由于webpack打包引起的，没打包之前，图片是在src文件夹的assets文件放置的图片，webpack不会把url中的相对路径解析成绝对路径，所以会出现线上地址本地不显示的情况。

相关问答

Q1: vue.js怎么引入material.css之类的ui库

1、vue只是一个js框架，和你引用css没有太大的关系，和普通的js一样的处理方式就好。例如你可以新建一个link标签，然后插入到head标签下之类的。

2、vue引入js文件的方法有三种分别是：在vue-cli webpack全局中引入jquery，通过vue组件来引入js文件，通过单vue页面引用内部js文件。

3、步骤：首先。我们要改造我们要映入的外部js文件，改成下面这个格式。

Q2: 为什么在vue的main.js中引入css或者报错,不引入没问题

1、发现是循环调用组件时，组件比vue实例后创建，官方文档里写组件必须先于实例化引入，所以说组件没有正确的引入。解决方式解决的方式就是全局引入组件，并且在vue实例化前。具体到我们项目中，就是在main.js里引入。

2、往往是在某个组件中，没有用scoped，导致污染了全局的样式。我的项目是因为之前多人开发，不严谨导致，css到处乱引用产生的错误。具体原因为在main.js引入了element的样式，然后到单独的组件中，又引入了一遍。

3、vuemain.js注册的方法vue组件的data中引用报错，需要解决循环引用报错问题。具体操作步骤如下：打开vuemain.js项目，使用全局引入组件。在vue实例化前，在main.js里完成引入。

4、首先申明我是window系统下Vue-cli3版本，脚手架整体基于vue2内核。正常js文件如果有使用export向外暴露对象，将js放在src/assets都是可以通过import直接引入。

关于main.js引入css和mainjs引入scss文件报错的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。