Vue-cli3項目配置Vue.config.js實戰(zhàn)記錄
Vue-cli3 搭建的項目 界面想對之前較為簡潔

之前的build和config文件夾不見了,那么應(yīng)該如何配置 如webpack等的配那只需要在項目的根目錄下vue.config.js
文件(是根目錄,不是src目錄
語法
module.exports = {
// 基本路徑
baseUrl: '/',
// 輸出文件目錄
outputDir: 'dist',
// 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: {},
// 生產(chǎn)環(huán)境是否生成 sourceMap 文件
productionSourceMap: true,
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項
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
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 插件相關(guān)配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相關(guān)配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 設(shè)置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
舉例

上圖內(nèi)容做了兩塊內(nèi)容,經(jīng)測試沒有問題
1.將啟動端口設(shè)置為 8080
2.設(shè)置路徑別名
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
- vue.config.js常用配置詳解
- 如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
- vue-cli3中vue.config.js配置教程詳解
- vue3中vue.config.js配置及注釋詳解
- vue.config.js完整配置教程
- vue2之vue.config.js最全配置教程
- vue配置vue.config.js超詳細教程
- vue3中配置文件vue.config.js不生效的解決辦法
- Vue.config.js配置報錯ValidationError:?Invalid?options?object解決辦法
- vue.config.js配置報錯解決辦法(可能是與webpack混淆)
相關(guān)文章
Vue+Element-ui彈窗?this.$alert?is?not?a?function問題
這篇文章主要介紹了Vue+Element-ui彈窗?this.$alert?is?not?a?function問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
使用Vue-Awesome-Swiper實現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果
這篇文章主要介紹了用Vue-Awesome-Swiper實現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值需要的朋友可以參考下2019-08-08

