怎么將Vue項目利用webpack打包部署到服務器?相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
公司主營業(yè)務:網(wǎng)站制作、成都做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出樊城免費做網(wǎng)站回饋大家。
必須要配置的就是/config/index.js
在vue-cli webpack的模板下的/config/index.js,我們可以看到assetsPublicPath這個鍵,并且這個東西還出現(xiàn)了兩次,我第一次打包的時候,只是修改了最下面的assetsPublicPath,將它從'/'變?yōu)榱?/,然后我就執(zhí)行了npm run build,打包成功之后,可以看到項目中會多出來一個文件夾,就是dist,里面有一個static文件夾和index.html,然后我就將dist目錄下的文件拷貝到Tomcat服務器下,會發(fā)現(xiàn)訪問到的是一個空白頁面,但是當我把它放在..\webapps\ROOT目錄下,它就可以訪問了
Tomcat下面的目錄結構:
但是這肯定是不行的,然后我就開始尋找答案,也根據(jù)別人的一些步驟做了下來,后來發(fā)現(xiàn)還是有一些問題的,沒有辦法訪問到主頁面,雖然吧,一直都沒成功,但是我也沒放棄,然后就綜合了一下問答里面別人說的,進行了幾次嘗試,最后成功了。(給大家一個小建議:別放棄就好)。
下面的就是我的config/index.js的配置:
// see http://vuejs-templates.github.io/webpack for documentation. var path = require('path') module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }, dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: './', proxyTable: {}, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false } }
可以發(fā)現(xiàn),我就改了兩處,就是assetsPublicPath所對應的值,我這里用的是./,我也用webapps下的命的項目名試過,只是沒得到我想要的結果,后來我還是改成了./
使用vue-router的情況
當你在項目中使用vue-router的時候,就需要給src/router/index.js添點東西,如下面:
export default new Router({ mode : 'history', base: '/ttms/', //添加的地方 ... }
然后執(zhí)行npm run dev,將打包后的文件放在Tomcat的目錄下的WebApps下的ttms中,然后,就可以訪問到了:http://localhost:8080/ttms/
看完上述內容,你們掌握怎么將Vue項目利用webpack打包部署到服務器的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
標題名稱:怎么將Vue項目利用webpack打包部署到服務器
當前URL:http://muchs.cn/article0/pipcio.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內鏈、服務器托管、網(wǎng)站排名、網(wǎng)站收錄、網(wǎng)站改版、網(wǎng)站建設
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)