vue-cli3.0創建項目
https://cli.vuejs.org/zh/guide/creating-a-project.html
vue.config.js配置
vue-cli3.0構建項目目錄中沒有build和config目錄,添加自定義配置需要在項目跟目錄中添加vue.config.js,注意是跟目錄非src下。配置如下:
const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
module.exports = {
// 基本路徑
baseUrl: '/',
// 輸出文件目錄
outputDir: 'dist',
assetsDir: 'assets', // 靜態資源目錄 (js, css, img, fonts)
// 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 webpack鏈接API,用於生成和修改webapck配置
chainWebpack: () => {
if (debug) {
// 本地開發配置
} else {
// 生產開發配置
}
},
configureWebpack: (config) => {// webpack配置,值位對象時會合並配置,爲方法時會改寫配置
if (debug) { // 開發環境配置
config.devtool = 'cheap-module-eval-source-map'
} else { // 生產環境配置
}
Object.assign(config, { // 開發生產共同配置
resolve: {
alias: {
'@': path.resolve(__dirname, './src')//設置路徑別名
//...
}
}
})
},
// vue-loader 配置項
// https://vue-loader.vuejs.org/en/options.html
// vueLoader: {},
// 生產環境是否生成 sourceMap 文件
productionSourceMap: true,
// css相關配置 配置高於chainWebpack中關於css loader的配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啓 CSS source maps?是否在構建樣式地圖,false將提高構建速度
sourceMap: false,
// css預設器配置項
loaderOptions: {},
// 啓用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores 構建時開啓多進程處理babel編譯
parallel: require('os').cpus().length > 1,
// 是否啓用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
// dll: false,
// PWA 插件相關配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相關配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 設置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}