项目相关配置

`vue.config.js`文件

module.exports = {
  publicPath: "/", //部署时的基本 URL，路由是hash模式用'./',history模式用'/'
  assetsDir: './static', //存放静态文件 (js、css、img、fonts)的目录
  productionSourceMap: false,//作用在于定位问题，打包时会生成.map文件，在生产环境就可以在浏览器查看到输出的信息具体是在哪一行，但相应的包的体积也会变大，将其设置为false则不生成.map文件
  devServer: {
    open: true, // 编译完成是否打开网页
    disableHostCheck: false, // 是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。
    host: "0.0.0.0", // 指定使用地址，默认localhost,0.0.0.0代表可以被局域网内访问
    port: 8088, //访问端口
    https: false,
    hot: false, //热更新，如果编译报错，会抛出错误，你重新改成正确的，这个时候又会触发重新编译，整个浏览器会重新刷新
    hotOnly: true //热更新，如果编译报错，你再改成正确的，重新编译，浏览器不会刷新
  },
  lintOnSave: true, //设置是否在开发环境下每次保存代码时都启用 eslint验证
};

`package.json`文件

vue-cli-service

vue-cli-service serve [options] [entry]：执行命令vue-cli-service serve会启动一个服务， (基于 webpack-dev-server) 并附带模块热重载 (Hot-Module-Replacement)

-–open: 在服务器启动时打开浏览器

-–copy: 在服务器启动时将 URL 复制到剪切版

-–mode: 指定环境模式 (默认值：development)

-–host: 指定 host (默认值：0.0.0.0)

-–post: 指定 port (默认值：8080)

-–https: 使用 https (默认值：false)

vue-cli-service build [options] [entry|pattern]：执行命vue-cli-service build 会在指定目录生成一个可用于生产环境的包。

–-mode：指定环境模式 (默认值：production)

-–dest：指定输出目录 (默认值：dist)

-–modern：使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。

-–target：app lib wc wc-async (默认值：app).允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。

-–name：库或 Web Components 模式下的名字 (默认值：package.json 中的 “name” 字段或入口文件名)

-–no-clean：在构建项目之前不清除目标目录的内容

-–report：生成 report.html 以帮助分析包内容

-–report –json：生成 report.json 以帮助分析包内容。例如：包中包含的模块们的大小。

-–watch：监听文件变化

"scripts": {
    //当npm run dev 命令时自动去.env.dev文件加载环境变量，运行后自动在浏览器打开，地址http://localhost:8080，--copy指令复制地址
    "dev": "vue-cli-service serve --open --copy --mode dev --host localhost --post 8080",
    //当npm run serve 命令时自动去.env.dev文件加载环境变量，运行后自动在浏览器打开，地址http://localhost:8080，--copy指令复制地址
    "serve": "vue-cli-service serve --open --copy --mode dev --host localhost --post 8080",
    //使用--mode qa来标识 当npm run qa 命令时会自动去.env.qa文件中加载环境变量，运行后将打包文件输出到dist-qa目录
    "qa": "vue-cli-service build --mode qa --dest dist-qa",
    //使用--mode prod来标识 当npm run pro命令时 会自动去.env.prod文件中加载环境变量，运行后将打包文件输出到 dist-pro目录
    "pro": "vue-cli-service build --mode prod --dest dist-pro"
    //使用--mode prod来标识 当npm run pro命令时会自动去.env.prod文件中加载环境变量，运行后将打包文件输出到默认目录dist
    "build": "vue-cli-service build --mode prod",
    //自动检查代码中的潜在错误和不规范的格式
    "lint": "vue-cli-service lint",
},

npm run lint的使用

安装eslint npm install eslint --save-dev

在项目根目录下新建.eslintrc.json配置文件，并进行相应的配置，例如：

{
"extends": "eslint:recommended",
"rules": {
  "no-console": "warn",
  "no-unused-vars": "warn"
}
}

在package.json的scripts中新增lint命令，例如：

"scripts": {
"lint": "eslint src"
}

在终端中执行npm run lint命令，即可自动检查代码中的错误。

npm run lint的常用配置选项 extends：extends可以引用已有的配置，避免重复配置，例如：”extends”: “eslint:recommended”。 rules：rules可以定义检查规则，用来针对代码风格进行检查，例如：”rules”: { “no-console”: “warn” }。 env：env用来指定代码运行的环境，例如：”env”: { “browser”: true, “node”: true }。 plugins：plugins用来扩展eslint的检查规则，例如：”plugins”: [ “react” ]。

如何忽略指定的代码文件？在.eslintignore文件中添加忽略的文件路径即可，例如：

/node_modules
/dist
/static

2、如何使用ESLint来检测Vue文件？使用eslint-plugin-vue插件可以检测Vue文件，安装命令为：npm install eslint-plugin-vue --save-dev 在.eslintrc.json中配置plugin选项，并增加extends选项，例如：

{
    "plugins": ["vue"],
    "extends": ["plugin:vue/essential"]
}

http://rank.chinaz.comwww.qdxiaochuan.com/?id=697

Vue——介绍项目相关的配置文件以及配置方法

`vue.config.js`文件

`package.json`文件

vue-cli-service

分类

vue.config.js文件

package.json文件

vue-cli-service

分类

`vue.config.js`文件

`package.json`文件