vue-cli3快速构建项目和vue.config.js配置

vue

2019-04-01

222

0

vue.config.js官方配置文档

vue-cli3快速构建项目

前提:node版本要在8.X以上,npm要在6.x以上

1.安装全局vue命令,安装完后可以用 vue -V 查看当前vue版本。

2.利用 vue create 项目名,快速构建项目。

3.根据命令提示,选择相应的想选个,进行下一步操作即可。完成后,运行 npm run serve,即可查看当前项目。

vue-cli3构建完项目后,原来的config和build文件夹不见了,那么我们怎么修改相关的webpack配置呢,vue-cli3提供了一个文件vue.config.js(需要我们手动创建),可以在这个文件中进行相关的webpack配置。下面是一些比较常用的配置:

module.exports = {
    publicPath: './', //已经用publicPath代替baseUrl了,// 根域上下文目录
    outputDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
    indexPath: 'index.html', //build后的相对于outputDir的index.html路径
    lintOnSave: true, // 是否开启eslint保存检测,有效值:ture | false | 'error'
    runtimeCompiler: true, // 运行时版本是否需要编译
    transpileDependencies: [], // 默认babel-loader忽略mode_modules,这里可增加例外的依赖包名
    productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度

 

    configureWebpack: (config) => {
       
    },

 

    css: { // 配置高于chainWebpack中关于css loader的配置
    // modules: true, // 是否开启支持‘foo.module.css’样式
    // extract: true, // 是否使用css分离插件 ExtractTextPlugin,采用独立样式文件载入,不采用
      sourceMap: false, // 是否在构建样式地图,false将提高构建速度
      loaderOptions: { // css预设器配置项
      sass: {
         data: '' //`@import "@/assets/scss/mixin.scss";`
       }
     }
  },
  parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
  pluginOptions: { // 第三方插件配置
  },
  pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  },
  devServer: {
  open: true,
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  proxy: null,
  // proxy: {
  // '/api': {
  // target: '',
  // ws: true,
  // changOrigin: true
  // }
  // },
  before: app => {}
  }
}
 

最全vue.config.js配置,请移步 揭秘vue——vue-cli3全面配置

发表评论

全部评论:0条

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01