前面一直用Vue-CLI2 搭建Vue 專案,后面用Vue-CLI4 搭建了一個新的Vue 專案，發現Vue專案有些檔案build檔案、config檔案目錄直接整沒了… 好家伙，那我怎么配置？？
擼檔案，Vue-CLI4、Vue-CLI3 與Vue-CLI2 之間的區別：使用后Vue-CLI4總體上與Vue-CLI3區別不大，Vue-CLI4與Vue-CLI2最直接的區別：
1、安裝：
Vue-CLI2：
npm install -g vue-cli 或 cnpm install -g vue-cli
Vue-CLI4：
npm install -g @vue/cli 或 cnpm install -g @vue/cli
2、卸載
Vue-CLI2：
npm uninstall -g vue-cli 或 cnpm uninstall -g vue-cli
Vue-CLI4：
npm uninstall -g @vue/cli 或 cnpm uninstall -g @vue/cli
3、創建專案
Vue-CLI2：
vue init webpack my-project2
Vue-CLI4：
vue create my-project4
4、專案目錄結構
Vue-CLI2：
Vue-CLI4：
5、專案運行
Vue-CLI2：
npm run dev
Vue-CLI4：
npm run serve
那問題來了，主要的build檔案、config檔案沒了，Vue-CLI4搭建的Vue專案怎么配置打包優化之類的，Vue CLI官方給出了新的全域配置解決方案項：
vue.config.js 是一個可選的組態檔，如果專案的 (和 package.json 同級的) 根目錄中存在這個檔案，那么它會被 @vue/cli-service 自動加載，
專案根目錄下 新建一個 vue.config.js 檔案，自己配置專案相關的配置即可，
6、vue.config.js 配置選項
module.exports = {
vue.config.js 配置選項
// 基本路徑
publicPath: "./",
// 構建時的輸出目錄
outputDir: "dist",
// 放置靜態資源的目錄
assetsDir: "static",
// html 的輸出路徑
indexPath: "index.html",
//檔案名哈希
filenameHashing: true,
//用于多頁配置，默認是 undefined
pages: {
index: {
// page 的入口檔案
entry: 'src/index/main.js',
// 模板檔案
template: 'public/index.html',
// 在 dist/index.html 的輸出檔案
filename: 'index.html',
// 當使用頁面 title 選項時，
// template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在這個頁面中包含的塊，默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk，
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 當使用只有入口的字串格式時，
// 模板檔案默認是 `public/subpage.html`
// 如果不存在，就回退到 `public/index.html`，
// 輸出檔案默認是 `subpage.html`，
subpage: 'src/subpage/main.js'
},
// 是否在保存的時候使用 `eslint-loader` 進行檢查，
lintOnSave: true,
// 是否使用帶有瀏覽器內編譯器的完整構建版本
runtimeCompiler: false,
// babel-loader 默認會跳過 node_modules 依賴，
transpileDependencies: [ /* string or regex */ ],
// 是否為生產環境構建生成 source map？
productionSourceMap: true,
// 設定生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標簽的 crossorigin 屬性，
crossorigin: "",
// 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標簽上啟用 Subresource Integrity (SRI)，
integrity: false,
// 調整內部的 webpack 配置
configureWebpack: () => {}, //(Object | Function)
chainWebpack: () => {},
// 配置 webpack-dev-server 行為，
devServer: {
open: process.platform === 'darwin',
host: 'localhost',
port: 8080,
https: false,
hotOnly: false,
// 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
proxy: {
'/api': {
target: "http://app.ly.com",
changeOrigin: true,
secure: false,
pathRewrite: {
"^/api": ""
}
},
'/foo': {
target: '<other_url>'
}
}, // string | Object
before: app => {}
},
// CSS 相關選項
css: {
// 將組件內的 CSS 提取到一個單獨的 CSS 檔案 (只用在生產環境中)
// 也可以是一個傳遞給 `extract-text-webpack-plugin` 的選項物件
extract: true,
// 是否開啟 CSS source map？
sourceMap: false,
// 為前處理器的 loader 傳遞自定義選項，比如傳遞給
// Css-loader 時，使用 `{ Css: { ... } }`，
loaderOptions: {
css: {
// 這里的選項會傳遞給 css-loader
},
postcss: {
// 這里的選項會傳遞給 postcss-loader
}
},
// 為所有的 CSS 及其預處理檔案開啟 CSS Modules，
// 這個選項不會影響 `*.vue` 檔案，
modules: false
},
// 在生產環境下為 Babel 和 TypeScript 使用 `thread-loader`
// 在多核機器下會默認開啟，
parallel: require('os').cpus().length > 1,
// PWA 插件的選項，
// 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
pwa: {},
// 三方插件的選項
pluginOptions: {
// ...
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/280667.html
標籤：其他