Vue搭载项目初始环境

1.构建开发环境，输入版本号，确定已有开发环境

2. 输入命令安装vue-cli，并查看Vue版本号确定OK了。

npm install -g @vue/cli

如果你需要下载指定版本

npm install -g @vue/cli@指定版本号

安装完成，检查vue版本

3.开始创建Vue项目

• vue create 项目名称
• cd 创建项目名称
• npm run serve
  
  
  基础环境创建OK

4.在根目录下新建vue.config.js

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

• 根据情况按需配置vue.config.js

module.exports = {
  // 基本路径
  // baseUrl: '/',   //从 Vue CLI 3.3 起已弃用，请使用publicPath
  publicPath: isProduction ? '/dist/' : '/', // 部署生产环境和开发环境下的URL：可对当前环境进行区分 
  // 输出文件目录   始终使用 outputDir 而不要修改 webpack 的 output.path
  outputDir: 'ko-h5-vue',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: 'static',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  // 是否使用完整的内置浏览器编译器
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  compiler: false,
  // webpack配置 详见 https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // vue-loader 配置项 详见 https://vue-loader.vuejs.org/en/options.html
  vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: true,
  // css相关配置
  css: {
   // 是否使用css分离插件 ExtractTextPlugin
   extract: true,
   // 开启 CSS source maps?
   sourceMap: false,
   // css预设器配置项
   loaderOptions: {},
   // 启用 CSS modules for all css / pre-processor files.
   modules: false
  },
  // webpack-dev-server 相关配置
  devServer: { 
	    port: '8090', // 端口号
	    https: false, // 关闭https
	    hotOnly: false, // 取消热更新
	    // proxy: { // 使用代理
	    //   '/api': {
	    //      target: '//www.woyouzhe.com', // 目标代理服务器地址
	    //      changeOrigin: true, // 是否允许跨域
	    //      target: 'http://****.****.****.****:8001',  //目标接口域名
        //      secure: false, //false为http访问，true为https访问
	    //     pathRewrite:{
	    //       '^/api': '' // 重写路径，需要设置重写的话，要在后面的调用接口前加上/api来代替target
	    //     }
	    //   }
	    // }
	}, // 设置代理
   before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {
   // ...
  }
}