vue-cli搭建项目及一些打包配置

vu-cli

vue create快速搭建项目

版本信息：Vue CLI v4.5.12

vue create projectName

模式和环境变量

模式

1》开发模式

vue-cli-service serve

2》测试模式

vue-cli-service test:unit

3》生产模式

vue-cli-service build 和 vue-cli-service test:e2e

当我们运行 vue-cli-service 时，环境变量从对应的环境文件中读取；如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"

--mode 选项参数为命令行修改默认的模式，可以自己设置模式；比如我下面设置了devtest模式

"devtest" : "vue-cli-service build --mode devtest"

环境变量

然后我在项目的根目录下(新建 .env.devtest 文件)配置devtest环境的环境变量

一个环境文件只包含环境变量的“键=值”对

VUE_APP_MODE="devtest"

设置环境变量的文件

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

使用环境变量

process.env.VUE_APP_MODE

注意：不要在你的应用程序中存储任何机密信息（例如私有 API 密钥）；环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它

只有 NODE_ENV，BASE_URL和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

vue.config.js文件配置

与package.json同级的可选配置文件，当没有时，会被@vue/cli-service自动加载

路径-outputDir

打包生成的包名及路径（ npm run build（vue-cli-service build）后生成的生产环境构建文件的目录 ）

相当于设置webpack的 output.path

outputDir的值	生成的路径	说明
“dist”	打包生成的文件全部都放在根目录下的dist目录下	默认值
“./packageName”	生成的包名时packageName,打包内容都再这个目录下	vue.config.js就在根目录下，所以使用相对路径也在根目录下
“./outcatalog/packageName”	打包生成的文件全部都放在outcatalog/packageName目录下	根目录下的outcatalog下的packageName目录

路径-publicPath

作用：项目部署的基础路径

默认值 : ‘“/”

用法和 webpack 本身的 output.publicPath一样

它不会影响打包生成的文件的目录，它修改的是html文件对其他静态资源的引用路径

场景应用：

假设域名是：https://www.test.com
1.‘/’：默认部署在域名的根部。即：https://www.vueconfig.com/
2./childrenpath/：认为部署在https://www.vueconfig.com/childrenpath/的子路径下
3.‘./’：相对路径（打包后部署到服务器中，从index.html开始计算的相对路径）
4.process.env.NODE_ENV === ‘production’ ? ‘/生产环境路径/’ : ’ ':不同开发环境的切换模式。
5.NODE_ENV：Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境。

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径

publicPath的限制

当使用历史模式路由或构建多页面应用时，应避免使用相对路径的publicPath

路径-assetsDir

作用：放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录

它时相对与outputDir目录 的

例如：打包生成的js、css、img、fonts这些静态资源想要放到outputDir目录下的static目录下

index.html的输出路径不由它控制

assetsDir: "static"

路径-indexPath

默认值Default: “index.html”

一般是不需要修改的

指定生成的 index.html 的输出路径 (相对于 outputDir )。也可以是一个绝对路径

lintOnSave

是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint被安装之后生效

1.false：关闭 elsint 检测
2.true：开启每次保存都进行检测，效果与warning一样。（一般选择true）
3.‘warning’：开启每次保存都进行检测，lint 报错信息将显示到控制台命令行，编译并不会失败。
4.‘default’：开启每次保存都进行检测，lint 报错信息将显示到浏览器页面上，且编译失败。
5.‘error’：开启每次保存都进行检测，lint 报错信息以及警告信息将显示到浏览器页面上，且编译失败

devServer

对应webpack的devServer配置

configureWebpack

如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。

如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

URL 转换规则

如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变

如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析

如果 URL 以 @ 开头，它也会作为一个模块请求被解析

构建VUE多页面应用

vue.config.js文件

 pages: {
    index: {
      entry: "src/views/secondPage/index.js",
      template: "public/index.html",
      filename: "index.html",
      title: "登录页面",
    },

    firstContent: {
      entry: "src/views/firstPage/index.js",
      template: "public/index.html",
      filename: "firstContent.html",
      title: "内容页面一",
    },

    secondContent: {
      entry: "src/views/thirdPage/index.js",
      template: "public/index.html",
      filename: "secondContent.html",
      title: "内容页面二",
    },
  },