写入.scss文件在mian.js中 import './styles/index.scss'后出现上图报错
解决方案：
在vue.config.js文件中添加以下代码
module.exports = {
}
转载于:https://www.cnblogs.com/jmwei/p/10196554.html
回答：
我早上也报过这个错误 我建议你贴一下 webpack的配置代码
我早上解决的方案是 重新卸载了css-loader style-loader file-loader 安装用-D
然后也没有配置任何东西 之前配置的 webpack代码 css-loader！style-loader都去掉了
很意外 没有问题了
然后我刚才又试了试 加上了配置代码 中间css那块 果然 又报错了
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test:/\.css$/,
loader:'css-loader!style-loader',
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
综上 还是不要配置了 也有可能是我自己配置错了
字体引入 你不能那么引入
应该在css中引入
@font-face {
font-family: DS;
src: url("../../assets/font/DS-DIGI.TTF");
}
body{
font-family: DS;
}
回答：
现在的vue-cli里面已经配置好了css各种loader，如果再配置一遍，必须设置include属性，否则报如上错误。
回答：
楼上说写config里头的css-loader等报错，是因为没有加include选项
回答：
css文件解析出错了.看下是不是语法有问题
源代码：
import Vue from 'vue'
import App from './App.vue'
import './assets/css/reset'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')错误截图
找了网上很多帖子，并不能解决问题，最后的解决办法是在引入文件后面加.css后缀
如下---
import Vue from 'vue'
import App from './App.vue'
import './assets/css/reset.css'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')转自：https://www.cnblogs.com/wangzhichao/p/7652749.html
这里是在vue组件中单独使用
1.安装vue-cli
参考地址：https://github.com/vuejs/vue-cli
如果不使用严格语法需要在后三项打no；（加了挺头疼的，老是报错，但是对自己的代码规范性也是有很大的帮助的）
2.swiper下载示例代码
参考地址：http://www.swiper.com.cn/usage/index.html
一：单个组件使用：
3.在刚下载好的vue-cli里的helloworld.vue进行代码编写。
3.1html部分：
1 <template> 2 <div class="hello"> 3 <div class="swiper-container"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide">Slide 1</div> 6 <div class="swiper-slide">Slide 2</div> 7 <div class="swiper-slide">Slide 3</div> 8 </div> 9 <!-- 如果需要分页器 --> 10 <div class="swiper-pagination"></div> 11 12 <!-- 如果需要导航按钮 --> 13 <div class="swiper-button-prev"></div> 14 <div class="swiper-button-next"></div> 15 16 <!-- 如果需要滚动条 --> 17 <div class="swiper-scrollbar"></div> 18 </div> 19 </div> 20 </template>
3.2 js部分：
这里使用import引入swiper.js文件；
swiper的启动放在mounted里执行；
<script> import'../assets/js/swiper.min.js' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted(){ var mySwiper = new Swiper ('.swiper-container', { loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.swiper-scrollbar', }) } } </script>
3.3css部分：
1 <style scoped> 2 @import'../assets/css/swiper.min.css'; 3 body { 4 margin: 0; 5 padding: 0; 6 } 7 .swiper-container { 8 width: 500px; 9 height: 300px; 10 margin: 20px auto; 11 } 12 13 14 </style>
4.看似大工告成，这时候会报错：
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
这个错误查文档说是：
在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。
因为webpack 2中不允许混用import和module.exports
我们只需要吧.babelrc文件里的第11行代码插件项"plugins": ["transform-runtime"],中的transform-runtime删掉即可；
1 { 2 "presets": [ 3 ["env", { 4 "modules": false, 5 "targets": { 6 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 } 8 }], 9 "stage-2" 10 ], 11 "plugins": [], 12 "env": { 13 "test": { 14 "presets": ["env", "stage-2"], 15 "plugins": ["istanbul"] 16 } 17 } 18 }
5.好了问题解决；
二：全局使用：
6.当然也可以全局使用swiper；代码如下；
还是在刚才的helloworld.vue进行代码编写；只是去掉js和css文件的引入！
helloworld.vue代码：
1 <template> 2 <div class="hello"> 3 <div class="swiper-container"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide">Slide 1</div> 6 <div class="swiper-slide">Slide 2</div> 7 <div class="swiper-slide">Slide 3</div> 8 </div> 9 <!-- 如果需要分页器 --> 10 <div class="swiper-pagination"></div> 11 12 <!-- 如果需要导航按钮 --> 13 <div class="swiper-button-prev"></div> 14 <div class="swiper-button-next"></div> 15 16 <!-- 如果需要滚动条 --> 17 <div class="swiper-scrollbar"></div> 18 </div> 19 </div> 20 </template> 21 22 <script> 23 24 export default { 25 name: 'HelloWorld', 26 data () { 27 return { 28 msg: 'Welcome to Your Vue.js App' 29 } 30 }, 31 mounted(){ 32 var mySwiper = new Swiper ('.swiper-container', { 33 loop: true, 34 // 如果需要分页器 35 pagination: '.swiper-pagination', 36 // 如果需要前进后退按钮 37 nextButton: '.swiper-button-next', 38 prevButton: '.swiper-button-prev', 39 // 如果需要滚动条 40 scrollbar: '.swiper-scrollbar', 41 }) 42 } 43 } 44 </script> 45 46 <!-- Add "scoped" attribute to limit CSS to this component only --> 47 <style scoped> 48 49 body { 50 margin: 0; 51 padding: 0; 52 } 53 .swiper-container { 54 width: 500px; 55 height: 300px; 56 margin: 20px auto; 57 } 58 59 60 </style>
main.js文件代码：
常见报错解决：
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
.babelrc文件里的插件项"plugins": ["transform-runtime"],中的transform-runtime删掉即可；
