搜了一些解決方案，發(fā)現(xiàn)很多人只貼一點代碼，就說解決了。我照葫蘆畫瓢，卻依然無法實現(xiàn)，這就導致我“既不知其然也不知其所以然”。于是我研究了config/index.js的配置，摸索出找到靜態(tài)文件的方法，分享如下：

• ?先說需求：

? ? ? ? ? a.我希望打包出來的結(jié)構(gòu)是：

? ? ? ? ? （別問為什么這么麻煩，都是項目需要/0.0\）

dist

- static

---- vuetest

-------- js

-------- css?

- templates

---- vuetest

-------- index.html

? ? ? ? ? ? ?b.當然就是不要報錯啦。

?

• 解決：清楚誰是誰，并根據(jù)項目實際需要配置

// 原始config/index.js。這里就是和 npm run build 息息相關(guān)的配置代碼 build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',productionSourceMap: true,devtool: '#source-map',productionGzip: false,productionGzipExtensions: ['js', 'css'],bundleAnalyzerReport: process.env.npm_config_report}

調(diào)整過后：

可能有點啰嗦，但這里的路徑是相對于config/index.js文件本身而言

build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/templates/vuetest/index.html'),// Paths// 將靜態(tài)資源打包到哪個目錄，會出現(xiàn)js、css文件夾assetsRoot: path.resolve(__dirname, '../dist/static'),// 引用靜態(tài)資源時可以理解為路徑將下面兩個相加assetsSubDirectory: 'vuetest',assetsPublicPath: '../../static/',//tip：下面這個改成false，能減少打包出來的體積，true835k,false149kproductionSourceMap: false,devtool: '#source-map',productionGzip: false,productionGzipExtensions: ['js', 'css'],bundleAnalyzerReport: process.env.npm_config_report}

打包時，會根據(jù)assetsRoot屬性，把靜態(tài)資源打包到dist/static文件夾。

涉及到靜態(tài)文件引用時，會將assetsPublicPath +?assetsSubDirectory 形成../../static/vuetest的形式引用。

至于是js還是css文件夾，是哪個css文件，這個就不用我們分心了，我們只需要把文件路徑配置清楚就好了。

總結(jié)

以上是生活随笔為你收集整理的vue-cli打包后，找不到css、js文件问题的解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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