browserslist

.browserslist 是一个文件，通常位于项目根目录下，用于定义项目支持的目标浏览器列表。

作用：

CSS前缀自动添加: 使用 Autoprefixer 这样的工具，根据目标浏览器列表自动添加必要的 CSS 前缀；
JavaScript语法转换：Babel可以基于.browserslist中的配置决定是否需要将现代JavaScript语法转为旧版本浏览器可以理解的语法；
其他工具和库：使用此配置来进行优化和确保代码的兼容性。如：Stylelint、PostCSS等。

配置语法：

使用一种查询语言，可以指定百分比用户基数，最近的浏览器版本、特定的浏览器版本，以及排除某些浏览器。如： last 2 versions：最后2个版本的主流浏览器； > 1%：市场份额大于1%的浏览器； not ie <= 8：不包括internet Explorer8及更早版本。

替代位置：

在没有.browserslist文件的情况下，配置信息可以放置在package.json文件中的browserslist字段中。

index.html文件

public/index.html文件是一个会被html-webpack-plugin处理的模板。在构建过程中，资源链接会被自动注入。其次，Vue-cli 也会自动注入构建过程中处理的JavaScript和CSS文件的资源链接。

注意：当你在 public/index.html 中引入资源时，需要注意路径问题。如果路径设置不当，可能会导致在某些页面上资源无法加载的情况。

public文件夹

此目录下的文件不会被Vue CLI 或其他构建工具编译，会原封不动地被复制到构建输出目录。

环境变量和模式

在项目中一般分为：开发环境、测试环境、生产环境，为了使我们可以更好的进行特定环境的操作，故此可以在根目录下使用.env文件增加后缀设置某个模式下特有的环境变量。比如：创建一个名为：.env.development的文件，设置NODE_ENV的值为development,那么在这个文件中声明的变量就只会在development模式下被载入。

使用--mode选项参数为命令行覆写默认的模式。加在package.json文件中如：

{
  "name": "my-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --mode development", // 开发环境
    "serve:test": "vue-cli-service serve --mode test", // 测试环境 
    "build:test": "vue-cli-service build --mode test", // 测试环境
    "build:prod": "vue-cli-service build --mode prod", // 生产环境
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
   ...
  },
  "devDependencies": {
   ...
  }
}

预览打包文件dist

打包文件是无法直接访问的，可以配合nginx进行代理访问；也可以使用官网本地预览这种方法进行预览。

vue2项目介绍