vue-cli3 vue.config.js配置

vue-cli3生成的项目比vue-cli2生成的项目目录简单很多,少了build与config文件夹，所以有的东西需要自己手动配置。

条件：

将npm更新至最新  node >=8.9

1.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli

2.查看vue版本

3.在一个新文件夹下创建项目

 

 

在项目跟目录下新建vue.config.js对vue-cli以及webpack可以进行一些配置

const path = require('path')

module.exports = {
// 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
publicPath: ‘./’,
// 输出文件目录
outputDir: ‘dist’,
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// 生成的 HTML 中的 <link rel=“stylesheet”> 和 <script> 标签上启用 Subresource Integrity (SRI)
integrity: false,
// webpack相关配置
chainWebpack: (config) => {
config.resolve.alias
.set(‘vue$’, ‘vue/dist/vue.esm.js’)
.set(’@’, path.resolve(__dirname, ‘./src’))
},
configureWebpack: (config) => {
if (process.env.NODE_ENV === ‘production’) {
// 生产环境
config.mode = ‘production’
} else {
// 开发环境
config.mode = ‘development’
}
},
// css相关配置
css: {
// 是否分离css（插件ExtractTextPlugin）
extract: true,
// 是否开启 CSS source maps
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 是否启用 CSS modules for all css / pre-processor files.
modules: false
},
// 是否使用 thread-loader
parallel: require(‘os’).cpus().length > 1,
// PWA 插件相关配置
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: true,
host: ‘localhost’,
port: 8080,
https: false,
hotOnly: false,
// http 代理配置
proxy: {
‘/api’: {
target: ‘http://127.0.0.1:3000/api’,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
},
before: (app) => {}
},
// 第三方插件配置
pluginOptions: {

}
}

 

转载：https://www.cnblogs.com/susutong/p/11457551.html