记vue-cli 3 项目配置

最新推荐文章于 2020-10-10 13:24:13 发布

白面_小丑

最新推荐文章于 2020-10-10 13:24:13 发布

阅读量176

点赞数

分类专栏：学习文章标签： vue

本文链接：https://blog.csdn.net/qq_42434077/article/details/84986218

版权

学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

npm uninstall vue-cli -g

npm i -g @vue/cli

vue -V => 3.2.1

vue create projectName

配置vue.config.js

重要的坑:scss路径后面要加 ";"

// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.scss` 这个文件
// var path = require("path");
module.exports = {
  // 基本路径
  baseUrl: "/",
  // 输出文件目录
  outputDir: "dist",
  //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  assetsDir: "",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  // compiler: false,
  // webpack配置 // see 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分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
        sass: {
          data: `@import "./src/assets/scss/global.scss";`
        }
    //   scss: {
    //     data: `@import "@/assets/scss/global.scss";`
    //   }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
   // webpack-dev-server 相关配置
  devServer: {
    open: true,
    host: "0.0.0.0",
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null // 设置代理
    // before: app => {}
  }
};