vue脚手架—基础内容（vue3+）

参考：https://cli.vuejs.org/zh/guide/【官网】

【对部分功能记录下，详情还是看官网】

一、基础

创建项目
插件和 Preset

CLI服务：vue-cli-service 命令

vue-cli-service serve：

用法：vue-cli-service serve [options] [entry]

选项：

  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

vue-cli-service build：

用法：vue-cli-service build [options] [entry|pattern]

选项：

  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录的内容
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

二、开发相关：

1、浏览器兼容性：

现代模式：不兼容 ES6以下的代码了，只转化为现代浏览器支持的语法
```
vue-cli-service build --modern 
```

2、HTML 和静态资源：

index.html 文件：public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。
模板插值： https://cli.vuejs.org/zh/guide/html-and-static-assets.html
除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。
- 可以直接写JS的语句，有的表达式可能需要前后用括号包起来。
```
<meta name="version" content="v1,<%=(new Date()).toLocaleDateString()%>" />
```
- html-webpack-plugin 暴露的默认值：应该就是在 webpack.config.js 配置的值。
```
<title><%= htmlWebpackPlugin.options.title %></title>
```
- 客户端环境变量：这个应该是就是配置的 node下的环境变量。
  环境变量的值，直接用变量后的名字获取就可以。前面不用写。
```
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
```

3、CSS相关

引用静态资源
预处理器
PostCSS

4、 webpack相关：【在 vue.config.js文件种配置】

简单的配置方式
option选项方式：

module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

函数方式：有需要基于环境有条件地配置行为

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.devTool= false
    } else {
      // 为开发环境修改配置...
    }
  }
}

链式操作（高级）

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

　注意：上面是直接去修改webpack配置了，开发中一些常规的配置 vue-cli都已经给我们配置好相应的选项了，只要在 vue.config.js 配置项设定就可以了。如

module.exports = {
    productionSourceMap: false   // 关闭 生成.map文件
}

上面配置是给vue-cli去处理的，当然也可以直接去操作webpack配置实现。webpack本身是没有productionSourceMap属性的，vue-cli基于productionSourceMap值去操作的webpack。

三、模式和环境变量 https://blog.csdn.net/weixin_45092437/article/details/130595271

应用运行模式：默认情况下，一个 Vue CLI有三个运行模式（test、development、production）。
vue-cli每个模式下都有默认的NODE_ENV环境变量，NODE_ENV可以通过--mode参数覆盖默认的变量。
重点：NODE_ENV变量改变，并不会改变vue-cli的运行模式，只是改变了打包策略。改变运行模式的是vue-cli-service 命令紧跟的参数，如 vue-cli-service serve
（官方文档上有一句话 “NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试” 个人感觉是错误的，容易误导）
- development 模式用于 vue-cli-service serve
  默认的NODE_ENV值就是development
- test 模式用于 vue-cli-service test:unit
  默认的NODE_ENV值就是test
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  默认的NODE_ENV值就是production
vue-cli打包策略：NODE_ENV 决定着应用的打包策略（3种打包策略，test、development、production）。
- development：不会对资源进行 hash 也不会打出 vendor bundles。
  表面来看，就是js文件虽然分割了，但是都没有hash值。在js目录中可以看到js文件的命名是 "数字.js"，如
```
0.js
1.js
```
- production：会对资源进行hash，也会打出vendor bundles。查看js目录，可以看到js文件命名是有hash值的，还是以chunk开头的。如
```
chunk-0df0455c.d063edec.js
```
  当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE_ENV 设置为 "production" 来获取可用于部署的应用程序。
- test：会创建一个优化过，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。
  表面来看，就是没有进行代码分割。js目录下只有一个js文件（即 app.js），且没有hash。

NODE_ENV和打包策略关系：NODE_ENV 决定着应用的打包策略。
- NODE_ENV的值如果是development、production、test就会采用对应的打包策略；
- 如果是其它值，如，NODE_ENV=“someone”，它会默认为NODE_ENV=“development” 的打包策略。
环境变量（文件）：
说明：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。
- NODE_ENV变量：NODE_ENV变量的值决定应用的打包策略。
  重点：不建议在文件中修改NODE_ENV的值，根据运行模式自动生成的值。因为默认的值只有3种，而且值对应的打包策略是明确的。
  而自己修改，如果单词错误就会导致打包时是 development 策略的包。
- BASE_URL变量：不建议在环境变量文件修改，BASE_URL的值为vue.config.js中的publicPath选项的值，即项目在部署时的基础路径，默认的值是 “/”。
  这个值的修改，是在 vue.config.js中的publicPath选项中。
- 其它自定义变量：VUE_APP_开头

　　总结：

- NODE_ENV的值虽然可以自定义，但是应该始终是 test、development、production中的一种。部署代码打包时， NODE_ENV 始终设置为 "production"。
- 改变环境变量配置的文件，通过 --mode 参数。如
```
vue-cli-service build --mode sping
```
  注意：官网上的 “NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试” 说法有问题，容易误解。
  --mode 只是指定环境变量文件（不要被mode中文含义误解成运行模式）

四、构建目标

应用
库

五、vue.config.js 配置：https://cli.vuejs.org/zh/config/#vue-config-js

六、功能实现

1、代理相关：查看另外一篇博客https://www.cnblogs.com/wfblog/p/16409042.html

Vue2动态代理,换服务无须重启项目: https://blog.csdn.net/meimeib/article/details/140096910
在vue.config.js文件中添加如下代码

const hotServer = () => {
  const path = './server-config.js';
  // require请求文件信息时，node会解析出我们传入的字符串的文件路径的绝对路径，并且以绝对路径为键值，对该文件进行缓存
  // 以绝对路径为键值删除require中的对应文件的缓存
  delete require.cache[require.resolve(path)];
  // 重新获取文件内容
  const { serverOrigin } = require(path);
  return serverOrigin || '';
};

修改proxy

proxy: {
  '/audit-apiv2': {
      secure: false,
      target: 'that must have a empty placeholder', // 这里必须要有字符串来进行占位
      // 项目在每次发起http请求时都会调用router中的函数
      router: () => hotServer(),
      onProxyReq(proxyReq) {
        // 绕过后端的csrf验证
        proxyReq.setHeader('referer', hotServer());
      }
    }
},

项目根目录下新建server-config.js文件

module.exports = {
  serverOrigin: 'https://192.168.21.79'
};

2、eslint 配置：https://blog.csdn.net/beichen3997/article/details/105810321

项目中禁用【即全局禁用】

module.exports = {
  lintOnSave: false
}

针对某个文件禁用：
- 方案1：文件开头使用下面配置
```
/* eslint-disable */
```
- 方案2：使用配置文件来选择禁用范围。创建文件.eslintignore
```
lib/*.js
```

针对文件中某一段代码禁用： https://www.crazyming.com/note/2432/

/* eslint-disable */
console.log("此处代码不被eslint做语法检查");
/* eslint-enable */

3、vue-cli3 分环境打包：https://www.jianshu.com/p/4d1d94b5099a（亲测有效）【vue-cli3号称0配置，确实简化了很多东西】或 https://www.cnblogs.com/XHappyness/p/9337229.html（内容说明比较详细）

　这样以后线上环境再多也没有影响了，一般公司自有两个环境，测试环境和正式环境；规范的公司会加一个预发布环境。

　　注：.env 文件中，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。 https://www.cnblogs.com/liubingboke/p/11347498.html 或 https://cli.vuejs.org/zh/guide/mode-and-env.html（vue-cli官网）

4、vue-cli 中 process.env的配置值：

　　1、process.env.BASE_URL：默认的值是 ”/“。

　　　 vue-cli中源码实现的文件在 @vue/cli-service/lib/util/resolveClientEnv.js 里面。https://blog.csdn.net/weixin_38578293/article/details/84823027

   核心代码： env.BASE_URL = options.publicPath

posted @ 2020-04-20 18:10 吴飞ff 阅读(321) 评论(0) 编辑收藏举报

刷新页面返回顶部

实践出真知

不会总结的前端不是好前端

vue脚手架—基础内容（vue3+）

一、基础

二、开发相关：

1、浏览器兼容性：

2、HTML 和静态资源：

3、CSS相关

4、 webpack相关：【在 vue.config.js文件种配置】

三、模式和环境变量 https://blog.csdn.net/weixin_45092437/article/details/130595271

四、构建目标

五、vue.config.js 配置：https://cli.vuejs.org/zh/config/#vue-config-js

六、功能实现

1、代理相关：查看另外一篇博客https://www.cnblogs.com/wfblog/p/16409042.html

2、eslint 配置：https://blog.csdn.net/beichen3997/article/details/105810321

公告

实践出真知

不会总结的前端不是好前端

vue脚手架—基础内容（vue3+）

一、基础

二、开发相关：

1、浏览器兼容性：

2、HTML 和 静态资源：

3、CSS相关

4、 webpack相关：【在 vue.config.js文件种配置】

三、模式和环境变量 https://blog.csdn.net/weixin_45092437/article/details/130595271

四、构建目标

五、vue.config.js 配置：https://cli.vuejs.org/zh/config/#vue-config-js

六、功能实现

1、代理相关： 查看另外一篇博客https://www.cnblogs.com/wfblog/p/16409042.html

2、eslint 配置：https://blog.csdn.net/beichen3997/article/details/105810321

公告

2、HTML 和静态资源：

1、代理相关：查看另外一篇博客https://www.cnblogs.com/wfblog/p/16409042.html