vue-cli 圖片途徑不正確解決方案

1.錯(cuò)誤提示:


2.vue 項(xiàng)目目錄

用到了

node.js

vue.js

vue-cli

vue-resource

vue-router

webpack

element-ui

3.解決方案

新建文件vue.config.js 放在根目錄辙售,參考要點(diǎn)2里面的目錄电抚,vue.config.js的內(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: "/dist/", // 構(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: false, // 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: null // string | Object

? ? // before: app => {}

? }, // 第三方插件配置

? pluginOptions: {

? ? // ...

? }

};




結(jié)束


其中:

????????publicPath: "/dist/", // 構(gòu)建好的文件輸出到哪里? ?

是關(guān)鍵墓卦。

npm run build 之后將dist文件夾(包含index.html,js,css等)放在nginx的html文件夾下即可~

訪問路徑:

http://網(wǎng)址:端口號(hào)/dist/index.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子馅闽,更是在濱河造成了極大的恐慌,老刑警劉巖馍迄,帶你破解...
    沈念sama閱讀 222,464評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件福也,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡攀圈,警方通過查閱死者的電腦和手機(jī)暴凑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赘来,“玉大人现喳,你說我怎么就攤上這事∪剑” “怎么了嗦篱?”我有些...
    開封第一講書人閱讀 169,078評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)忧风。 經(jīng)常有香客問我默色,道長(zhǎng),這世上最難降的妖魔是什么狮腿? 我笑而不...
    開封第一講書人閱讀 59,979評(píng)論 1 299
  • 正文 為了忘掉前任腿宰,我火速辦了婚禮,結(jié)果婚禮上缘厢,老公的妹妹穿的比我還像新娘吃度。我一直安慰自己,他們只是感情好贴硫,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評(píng)論 6 398
  • 文/花漫 我一把揭開白布椿每。 她就那樣靜靜地躺著,像睡著了一般英遭。 火紅的嫁衣襯著肌膚如雪间护。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,584評(píng)論 1 312
  • 那天挖诸,我揣著相機(jī)與錄音汁尺,去河邊找鬼。 笑死多律,一個(gè)胖子當(dāng)著我的面吹牛痴突,可吹牛的內(nèi)容都是我干的搂蜓。 我是一名探鬼主播,決...
    沈念sama閱讀 41,085評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼辽装,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼帮碰!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起拾积,我...
    開封第一講書人閱讀 40,023評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤殉挽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后殷勘,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體此再,經(jīng)...
    沈念sama閱讀 46,555評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評(píng)論 3 342
  • 正文 我和宋清朗相戀三年玲销,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了输拇。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,769評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡贤斜,死狀恐怖策吠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情瘩绒,我是刑警寧澤猴抹,帶...
    沈念sama閱讀 36,439評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站锁荔,受9級(jí)特大地震影響蟀给,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜阳堕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評(píng)論 3 335
  • 文/蒙蒙 一跋理、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧恬总,春花似錦前普、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至贱纠,卻和暖如春峻厚,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背谆焊。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工目木, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,191評(píng)論 3 378
  • 正文 我出身青樓刽射,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親剃执。 傳聞我的和親對(duì)象是個(gè)殘疾皇子誓禁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 版權(quán)聲明:本文為博主原創(chuàng)文章怒见,未經(jīng)博主允許不得轉(zhuǎn)載俗慈。 webpack介紹和使用 一、webpack介紹 1遣耍、由來 ...
    it筱竹閱讀 11,159評(píng)論 0 21
  • 基于Vue的一些資料 內(nèi)容 UI組件 開發(fā)框架 實(shí)用庫 服務(wù)端 輔助工具 應(yīng)用實(shí)例 Demo示例 element★...
    嘗了又嘗閱讀 1,156評(píng)論 0 1
  • GitChat技術(shù)雜談 前言 本文較長(zhǎng)闺阱,為了節(jié)省你的閱讀時(shí)間,在文前列寫作思路如下: 什么是 webpack舵变,它要...
    蕭玄辭閱讀 12,698評(píng)論 7 110
  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本號(hào) vue-c...
    tengrl閱讀 3,659評(píng)論 0 0
  • 響應(yīng)式布局的理解 響應(yīng)式開發(fā)目的是一套代碼可以在多種終端運(yùn)行,適應(yīng)不同屏幕的大小,其原理是運(yùn)用媒體查詢,在不同屏幕...
    懶貓_6500閱讀 791評(píng)論 0 0