這篇文章主要介紹Vue Cli3如何創(chuàng)建項(xiàng)目，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)公司公司2013年成立，先為邢臺(tái)等服務(wù)建站，邢臺(tái)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為邢臺(tái)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
最近的開發(fā)項(xiàng)目中使用了vue-cli 3.0，使用體驗(yàn)可以說非常棒了，模板更加制定化，配置更加簡(jiǎn)潔。以下總結(jié)下應(yīng)用過程中的一些經(jīng)驗(yàn)。
1. 安裝
npm install -g @vue/cli
2. 創(chuàng)建一個(gè)項(xiàng)目
vue create iview-admin # OR vue ui
default (babel, eslint) 默認(rèn)套餐，提供 babel 和 eslint 支持。
Manually select features 自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持 TypeScript ，就應(yīng)該選擇這一項(xiàng)。
TypeScript 支持使用 TypeScript 書寫源碼。
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 預(yù)處理器。
Linter / Formatter 支持代碼風(fēng)格檢查和格式化。
Unit Testing 支持單元測(cè)試。
E2E Testing 支持 E2E 測(cè)試。
3. 運(yùn)行項(xiàng)目
$ npm run serve
4. 在根目錄創(chuàng)建 vue.config.js 空文件，配置 文件
重慶分公司
重慶分公司
module.exports = {
/** 區(qū)分打包環(huán)境與開發(fā)環(huán)境
* process.env.NODE_ENV==='production' (打包環(huán)境)
* process.env.NODE_ENV==='development' (開發(fā)環(huán)境)
* baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
*/
// 基本路徑
baseUrl: '/',
// 輸出文件目錄
outputDir: 'dist',
// eslint-loader 是否在保存的時(shí)候檢查
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: () => {},
//如果想要引入babel-polyfill可以這樣寫
// configureWebpack: (config) => {
// config.entry = ["babel-polyfill", "./src/main.js"]
// },
// vue-loader 配置項(xiàng)
// 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è)器配置項(xiàng)
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',
// 自動(dòng)打開瀏覽器
open: true,
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 處理跨域問題
proxy: {}, // 設(shè)置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}設(shè)置代理
# string
module.exports = {
devServer: {
proxy: ''
}
}
# Object
module.exports = {
devServer: {
proxy: {
'/api': {
target: '',
ws: true,
changeOrigin: true
},
'/foo': {
target: ''
}
}
}
} 啟用dll
啟用dll后，我們的動(dòng)態(tài)庫文件每次打包生成的vendor的[chunkhash]值就會(huì)一樣，其值可以是 true/false,也可以制定特定的代碼庫。
module.exports = {
dll: true
}
module.exports = {
dll: [
'dep-a',
'dep-b/some/nested/file.js'
]
}靜態(tài)資源路徑
相對(duì)路徑
靜態(tài)資源路徑以 @ 開頭代表
靜態(tài)資源路徑以 ~ 開頭，可以引入node modules內(nèi)的資源
public文件夾里的靜態(tài)資源引用
