新电脑配置vue-cli

246 阅读1分钟

1.安装

  • 提示:vue cli 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
  • npm 更至最新-----------node >=8.9
npm install -g @vue/cli (mac 需要前面加 sudo )
vue -V			// @vue/cli 4.5.7

2.在新文件夹下创建项目 vue create my-project

vue create 项目名 
之后自己选择配置(选择默认(default)还是手动(Manually))

3.配置自动打开浏览器

 1.在paga.json 平级 创建 vue.config.js (必须这个名字)
const path = require('path')
module.exports = {
  // 配置代理并自动打开浏览器
  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 8080,
    // https: false,
    proxy: { // 配置跨域
      '/tim': {
        target: 'http://192.168.90.111:8090', // 开发
        // ws: true,
        changOrigin: true
      }
    }
  },
  // 基本路径,相对路径
  publicPath: './',
  // 输出文件目录
  outputDir: 'dist-' + process.env.NODE_ENV,
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'static',
  // css 相关选项
  css: {
    /* 为预处理器 loader 传递自定义选项 */
    loaderOptions: {
      // sass: {
      //   // data: '@import "@/style/color.scss";'
      // }
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/styles/scss/common.scss";`
      }

    }
  },
  // 配置使用stylus全局变量
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type =>
      addStyleResource(config.module.rule('stylus').oneOf(type))
    )
  },
  productionSourceMap: false, // 生产打包时不输出map文件,增加打包速度
  // 配置 发布环境取消console.log
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
    }
  }
}
// ====定义函数addStyleResource===
function addStyleResource(rule) {
  rule
    .use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [path.resolve(__dirname, './src/styles/common.styl')] // 后面跟着的路径改成你自己放公共stylus变量的路径
    })
}