引入vue.config.js并重置游览器默认样式

引入vue.config.js并重置游览器默认样式

所用版本
vue 2.6.11 版本
vue cli 4.5.7版本

引入vue.config.js

步骤

1. 创建并初始化项目
2. 创建vue.config.js文件在跟目录下。
3. 编写vue.config.js 内容（从网上查找也可以）
4. 从新启动项目

问题

当启动项目时或报错

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fengts@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fengts@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     d:\nodejs\node_cache\_logs\2020-11-19T13_40_31_660Z-debug.log
Process finished with exit code 1

这是因为我配置文件写点有问题

• 有问题的配置文件

devServer: {    
    open: false, // 编译完成是否打开网页    
    host: "0.0.0.0", // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问    
    port: 8080, // 访问端口    https: false, // 编译失败时刷新页面    
    hot: true, // 开启热加载    
    hotOnly: false,    
    proxy: {    }, // 设置代理    
    overlay: {        // 全屏模式下是否显示脚本错误        
    warnings: true,        
    errors: true    },    // eslint-disable-next-line no-unused-vars    
    before: app => {    }
}

把 proxy: { }, // 设置代理 注释掉就可以了,当然我还不知道因为什么以后会回来补充

重置游览器样式

步骤

1. 创建文件加并创建全局scss文件
2. 创建游览器重置scss文件
3. 把重置文件引入到全局scss文件中
4. 把全局scss文件添加到vue.config.js中来，添加到css配置块中。

• 代码如下：

css: {    
    // 是否使用css分离插件 ExtractTextPlugin    
    extract: true,    // 开启 CSS source maps?    
    sourceMap: false,    // css预设器配置项    
    loaderOptions: {        
    // 如发现 css.modules 报错，请查看这里：http://www.web-jshtml.cn/#/detailed?id=12        
        sass: {            
            prependData: `@import  "./src/styles/main.scss";` //引入全局变量       
        }   
    }
}

运行项目

问题

当查看网页时你会发现有可能没有作用，

这是因为当时创建项目时，随手删掉了一些css样式。

在App.vue 文件中style标签中必须有 #app{}这个东西。

<style lang="scss">
#app {}
</style>

以后这个东西必须留着。

总结

多尝试多总结，所思考，不积跬步无以至千里，不积小流无以成江河