話不多說，跟好lz的操作！！！

2020/8/1

---

第一步：

~~~~質(zhì)問三連：

~~~~~~~~1.node.js安裝了嗎？：ht

tp://nodejs.cn/download/

~~~~~~~~2.vue安裝了嗎？：打開cmd，全局安裝，使用npm install vue -g --save

~~~~~~~~3.vuecli(vue腳手架)安裝了嗎？：打開cmd，全局安裝，使用npm install -g @vue/cli，用vue -V查看版本(注意：后面的V是大寫！！！)

第二步：

~~~~開始搭建項(xiàng)目：

~~~~~~~~1.打開cmd，使用vue ui，這時(shí)會(huì)打開搭建vue腳手架項(xiàng)目的網(wǎng)頁

~~~~~~~~2.你一看，就知道怎么創(chuàng)建了，選一個(gè)路徑，放你要?jiǎng)?chuàng)建的項(xiàng)目的項(xiàng)目文件夾，創(chuàng)建

~~~~~~~~3.輸入你項(xiàng)目文件夾的名字。包管理器，就npm。下一步

~~~~~~~~4.手動(dòng)。下一步

~~~~~~~~5.害怕少選，選錯(cuò)？如果擔(dān)心搞錯(cuò)的話，最好都選上

~~~~~~~~6.左邊兩個(gè)都選上。右邊選ESLint + Prettier，或者ESLint +Standard config

~~~~~~~~7.創(chuàng)建項(xiàng)目。彈出個(gè)框，可寫可不寫。創(chuàng)建項(xiàng)目

~~~~~~~~8.打開你剛剛輸入vue ui的那個(gè)cmd，你看見正在加載，等它加載完之后項(xiàng)目就創(chuàng)建好了。

~~~~~~~~9.還沒結(jié)束，我們還要添加一些文件

第三步：

~~~~打開你的項(xiàng)目文件夾的根目錄，你會(huì)看到根目錄里面有public文件夾，src文件夾等各種東西

~~~~然后就在你的項(xiàng)目文件夾的根目錄下創(chuàng)建一個(gè) vue.config.js 文件

~~~~在這個(gè)文件中寫入以下內(nèi)容，保存：

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/', */ // 項(xiàng)目部署的基礎(chǔ)路徑 // 我們默認(rèn)假設(shè)你的應(yīng)用將會(huì)部署在域名的根部, // 例如 https://www.my-app.com/ // 如果你的應(yīng)用部署在一個(gè)子路徑下，那么你需要在這里 // 指定子路徑。比如將你的應(yīng)用部署在 // https://www.foobar.com/my-app/ // 那么將這個(gè)值改為 '/my-app/' publicPath: "./", // 構(gòu)建好的文件輸出到哪里 outputDir: "./dist", // where to put static assets (js/css/img/font/...) // 是否在保存時(shí)使用‘eslint-loader’進(jìn)行檢查 // 有效值: true | false | 'error' // 當(dāng)設(shè)置為‘error’時(shí)，檢查出的錯(cuò)誤會(huì)觸發(fā)編譯失敗 lintOnSave: true, // 使用帶有瀏覽器內(nèi)編譯器的完整構(gòu)建版本 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only runtimeCompiler: true, // babel-loader默認(rèn)會(huì)跳過`node_modules`依賴. // 通過這個(gè)選項(xiàng)可以顯示轉(zhuǎn)譯一個(gè)依賴 transpileDependencies: [ /* string or regex */ ], // 是否為生產(chǎn)環(huán)境構(gòu)建生成sourceMap? productionSourceMap: false, // 調(diào)整內(nèi)部的webpack配置. // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // CSS 相關(guān)選項(xiàng) css: { // 將組件內(nèi)部的css提取到一個(gè)單獨(dú)的css文件(只用在生產(chǎn)環(huán)境) // 也可以是傳遞給 extract-text-webpack-plugin 的選項(xiàng)對(duì)象 extract: true, // 允許生成 CSS source maps? sourceMap: false, // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } } loaderOptions: {}, // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue 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, // PWA 插件相關(guān)配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // configure webpack-dev-server behavior devServer: { open: process.platform === "darwin", disableHostCheck: false, host: "0.0.0.0", port: 8088, https: false, hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy // proxy: { // '/api': { // // 此處的寫法，目的是為了 將 /api 替換成 https://www.baidu.com/ // target: 'https://www.baidu.com/', // // 允許跨域 // changeOrigin: true, // ws: true, // pathRewrite: { // '^/api': '' // } // } // } // string | Object // before: app => {} }, // 第三方插件配置 pluginOptions: { // ... }};

~~~~這個(gè) vue.config.js 文件在腳手架2.x版本的時(shí)候是一個(gè)config文件夾，里面有幾個(gè)文件

|-config
|—dev.env.js
|—index.js
|—prod.env.js

~~~~現(xiàn)在統(tǒng)一寫在 vue.config.js 中

~~~~可以看到，vue.config.js 中有一個(gè)proxy對(duì)象，這個(gè)是為以后的網(wǎng)絡(luò)請(qǐng)求而生的

---

這篇文章到這里就結(jié)束了，是不是感覺很方便呢？希望對(duì)您有所幫助

總結(jié)

以上是生活随笔為你收集整理的vue dplayer 加载失败_最新vue脚手架项目搭建，并解决一些折腾人的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。