Vue - Vue Cli 3.0脚手架

最新推荐文章于 2024-08-29 17:57:58 发布

TianNicholas

最新推荐文章于 2024-08-29 17:57:58 发布

阅读量199

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/qq_32615575/article/details/103699222

版权

前端技术专栏收录该内容

78 篇文章 0 订阅

订阅专栏

安装包名称改为@vue/cli

npm install -g @vue/cli  //安装
npm view @vue/cli version  //npm查看最新版本

新建项目后，package.json 下的 script

 "scripts": {
    "serve": "vue-cli-service serve",
    "build:stage": "vue-cli-service build --mode staging",  
    //--mode环境模式，最终将会被process.env（environment的缩写）属性值拿到
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
  }

vue-cli-service serve (命令)

options 参数如下

Usage: vue-cli-service serve [options]
Options:
  --open    open browser on server start
  --copy    copy url to clipboard on server start
  --mode    specify env mode (default: development)
  --host    specify host (default: 0.0.0.0)
  --port    specify port (default: 8080)
  --https   use https (default: false)

vue-cli-service build

options 参数如下

Usage: vue-cli-service build [options] [entry|pattern]
Options:
  --mode        specify env mode (default: production)
  --dest        specify output directory (default: dist)
  --modern      build app targeting modern browsers with auto fallback
  --target      app | lib | wc | wc-async (default: app)
  --name        name for lib or web-component mode (default: "name" in package.json or entry filename)
  --no-clean    do not remove the dist directory before building the project
  --report      generate report.html to help analyze bundle content
  --report-json generate report.json to help analyze bundle content
  --watch       watch for changes

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
这个文件应该导出一个包含了选项的对象：

// vue.config.js
module.exports = {
  // 选项...
  devServer:{// 所有 webpack-dev-server 的选项都支持。
 			 //注意：有些值像 host、port 和 https 可能会被命令行参数覆写。
 	host:xx, //有些值像 publicPath 和 historyApiFallback 不应该被修改，
 	port:xxx,		 //因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
 	https:xxx,
 	//proxy:Object|string     //代理设置，如果你的前端应用和后端 API 服务器没有运行在同一个主机上，
 			//你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
 	proxy: 'http://localhost:4000'//服务器地址1、这会告诉开发服务器将任何未知请求
 	// (没有匹配到静态文件的请求) 代理到http://localhost:4000。
 	proxy: {    //2、如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象
      '/api': {
        target: '<url>',//服务器地址，可以使用process.env从env文件中获取访问地址
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        'public': path.resolve('public')
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery'
      })
    ]
  },
}

环境变量和模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式

每个模式将会把NODE_ENV改为对应的模式值，也就是说NODE_ENV - 会是 “development”、“production” 或 “test” 中的一个。具体的值取决于应用运行的模式。
development 模式用于 vue-cli-service serve (默认)
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

package.json 与.env文件

script s命令中的 --mode xxx参数运行.env.xxx后缀的文件名称，两者必须保持一致，这是指定模式
你可以替换你的项目根目录中的下列文件来指定环境变量：

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

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

NODE_ENV = 'development'  //环境模式
FOO=bar
VUE_APP_SECRET=secret  //只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
//你可以在应用的代码中这样访问它们：console.log(process.env.VUE_APP_SECRET)
NODE_ENV 和 BASE_URL //是两个特殊变量，在代码中始终可用