vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】

旧城等待， 2024-03-24 12:22 44阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*  2.项目的其他配置
 *   *  2.1 项目运行时，让浏览器自动打开
     *  2.2 关闭eslint的校验功能、配置map不打包、配置默认打开浏览器显示无法访问的问题
     *  2.3 给src文件夹简写方法，配置别名，方便引入资源
 *  本人其他相关文章链接

## 2.项目的其他配置 ##

### 2.1 项目运行时，让浏览器自动打开 ###

在package.json中更改script项，改为如下代码，只是在"serve"后面多添加了–open而已

"scripts": {
        
        //在后面添加 --open
        "serve": "vue-cli-service serve --open",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      }

### 2.2 关闭eslint的校验功能、配置map不打包、配置默认打开浏览器显示无法访问的问题 ###

在根目录中新建vue.config.js文件（切记名字一定得叫vue.config.js，不能叫其他名字）

> `问题`：为啥需要关闭eslint的校验功能？

`答案`：比如声明一个变量但是没有使用情况下，eslint校验工具会报错导致项目启动不了。

文件中配置如下代码

module.exports = {
        
        //配置map，减少打包后的dist的大小
      	productionSourceMap:false,
        // 关闭eslint语法校验
        lintOnSave:false,
        devServer: {
        
            //解决默认打开浏览器，会出现0.0.0.0:8080，浏览器显示无法访问
        	host: 'localhost'
        }
    }

### 2.3 给src文件夹简写方法，配置别名，方便引入资源 ###

在根目录中新建jsconfig.json文件，配置别名@提示【@代表的是src文件夹，这样将来文件过多，找的时候方便很多】

jsconfig.json文件写入如下代码

{
        
        // 配置：用 @ 代替src文件夹
        "compilerOptions": {
        
            "baseUrl": "./",
            "paths": {
        
                "@/*": ["src/*"]
            }
        },
        "exclude": ["node_modules","dist"]
    }

## 本人其他相关文章链接 ##

1.[vue尚品汇商城项目-day00【项目介绍：此项目是基于vue2的前台电商项目和后台管理系统】][vue_-day00_vue2]  
2.[vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】][vue_-day01_1.vue-cli]  
3.[vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】][vue_-day01_2.vue-cli]  
4.[vue尚品汇商城项目-day01【3.项目路由的分析】][vue_-day01_3.]  
5.[vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】][vue_-day01_4._Header_Footer]  
6.[vue尚品汇商城项目-day01【5.路由组件的搭建】][vue_-day01_5.]  
7.[vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】][vue_-day01_6.Footer]  
8.[vue尚品汇商城项目-day01【7.路由传参】][vue_-day01_7.]  
9.[vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】][vue_-day01_8.]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a44943693fd2483ab9b70a3a65085bae.png
[vue_-day00_vue2]: https://blog.csdn.net/a924382407/article/details/129880297
[vue_-day01_1.vue-cli]: https://blog.csdn.net/a924382407/article/details/129879169
[vue_-day01_2.vue-cli]: https://blog.csdn.net/a924382407/article/details/129879406
[vue_-day01_3.]: https://blog.csdn.net/a924382407/article/details/129881128
[vue_-day01_4._Header_Footer]: https://blog.csdn.net/a924382407/article/details/129881205
[vue_-day01_5.]: https://blog.csdn.net/a924382407/article/details/129881287
[vue_-day01_6.Footer]: https://blog.csdn.net/a924382407/article/details/129881425
[vue_-day01_7.]: https://blog.csdn.net/a924382407/article/details/129882067
[vue_-day01_8.]: https://blog.csdn.net/a924382407/article/details/129882108