vue-cli3 基本配置

module.exports = {

// 部署生产环境和开发环境下的URL 假设部署域名为https://www.my-app.com/my-app/ 那么publicPath应为/my-app/ 当然也可以是''字符串 也可以是./ 这样所有资源均为相对路径

publicPath: process.env.NODE_ENV === 'production' ? './' : '/',

// 生成静态资源目录

outputDir: "dist",

// 放置静态资源的目录

assetsDir: "static",

// 生成指定index.html路径

indexPath: 'index.html',

// 生成的文件名转换为hash

filenameHashing: false,

// 在 multi-page 模式下构建应用

pages: {

index: {

// page的入口

entry: {

index: 'src/index/main.js'

},

// 模板来源

template: 'public/index.html',

// 在dist/index.html 输出

filename: 'index.html',

// 如果需要指定title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>

title: 'Index Page',

// 相当于注入多页面应用 需要entry配合

chunks: ['index']

},

// 当使用只有入口的字符串格式时，

// 模板会被推导为 `public/subpage.html`

// 并且如果找不到的话，就回退到 `public/index.html`。

// 输出文件名会被推导为 `subpage.html`。

// subpage: 'src/subpage/main.js'

},

// ESlint 设置 仅在安装@vue/cli-plugin-eslint 之后有效 为true时警告只会输出到命令行 为error时 错误会输出为编译错误

lintOnSave: 'error',

// 运行时 + 编译器 vs. 只包含运行时

runtimeCompiler: false,

// babel默认忽略所有node_module文件 如果想转译一个依赖

transpileDependencies: [],

// 是否生成source map 如果不需要可以为false 加速构建

productionSourceMap: false,

// 是否生在生成的标签中添加 例如scripr link中添加 crossorigin属性 使用跨越链接时会使用这个属性

crossorigin: undefined,

// 是否生在生成的标签中添加 例如scripr link中添加 integrity属性 使用跨越链接时会使用这个属性

integrity: false,

// 修改webpack配置

configureWebpack: (config) => {

if (process.env.NODE_ENV === 'production') {

// 为生产环境修改配置...

} else {

// 为开发环境修改配置...

}

},

// 修改webpack配置

chainWebpack: (config) => {

 

},

// 配置css处理参数

css: {

// 默认情况 *.module.[ext] 才会被视为 css Modules 模块 设为true可以去掉module

modules: true,

// 是否将组件中的css提取成一个独立的css 开发环境为false, 生产环境为true, 因为他和css热重载不兼容

extract: false,

// 是否为css开启 source map 设置为 true 之后可能会影响构建的性能。

sourceMap: false,

//

loaderOptions: {

// 给 sass-loader 传递选项

sass: {

// @/ 是 src/ 的别名

// 所以这里假设你有 `src/variables.scss` 这个文件

// 比如你可以这样向所有 Sass 样式传入共享的全局变量

data: `@import "~@/variables.scss";`

}

}

},

devServer: {

host: "localhost",

port: 8888, // 端口号

https: false, // https:{type:Boolean}

open: true, //配置自动启动浏览器

// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理

// 配置多个代理

proxy: {

"/api": {

target: "<url>",

ws: true,

changeOrigin: true

},

'/foo': {

target: '<other_url>'

}

}

},

// 向 PWA 插件传递选项。

pwa: {

 

}

}