很簡單不復雜只需要幾步
1、找到專案的 webpack環境配置的config目錄下的index.js檔案的assetsPublicPath把"/"改成 "./"
得出: 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']
....
}
2、找到biuld目錄下的utils檔案修改成 publicPath:'../../'
3、修改路由router目錄下的檔案
router = new VueRoter({
mode: 'history',
base: '/aaa/', //aaa 就是伺服器Tomact相對於根目錄的名稱 在此目錄放的就是 static 和 index.html檔案 這兩檔案你是專案打包生成的dist檔案只要copy過來就能成功部署在伺服器上進行訪問了
routes:[{
path:'./',
name:'',
component:'''
....省略
}]
)}
VUE-CLI webpack 專案打包部署上線
相關文章
- Vue專案上線環境部署,專案優化策略,生成打包報告,及上線相關配置Vue優化
- 【前端打包部署】談一談我在SPA專案打包=>部署的處理(上)前端
- Vue專案上線前的優化以及專案打包上線流程Vue優化
- Parceljs和Webpack在React專案上打包速度對比JSWebReact
- vue-cli專案升級webpack4VueWeb
- antd專案各種webpack打包方案Web
- Vue專案打包到django部署VueDjango
- Vue SPA 專案webpack打包優化指南VueWeb優化
- 結合vue-cli來談webpack打包優化VueWeb優化
- vue-cli webpack3 擴充套件多模組打包VueWeb套件
- vue-cli npm run build 打包問題 webpack@3.6VueNPMUIWeb
- Ubuntu tomcat部署專案連線不上mys…UbuntuTomcat
- 【前端打包部署】談一談我在SPA專案打包=>部署的處理前端
- 將java專案打包部署在linux系統上(配置成systemd)JavaLinux
- 如何打包部署一個tomcat專案Tomcat
- Webpack + Vue 多頁面專案升級 Webpack 4 以及打包優化WebVue優化
- centos+nginx+uwsgi部署django專案上線詳解CentOSNginxDjango
- webpack打包bundle檔案解析Web
- 跟著Vue-cli來'學'並'改'Webpack之 打包優化VueWeb優化
- 【Vue專案總結】webpack常規打包優化方案VueWeb優化
- 專案上線-CDN
- vue-cli專案打包多個與static檔案同級的靜態資源目錄(copy-webpack-plugin外掛的使用)VueWebPlugin
- 記錄一次vue-cli工程打包部署過程Vue
- vue-cli 專案打包後出現空白頁和路徑錯誤Vue
- 一行命令解決Vue和React打包部署上線VueReact
- webpack4打包vue前端多頁面專案WebVue前端
- webpack專案開發完後,如何最佳化打包速度?Web
- vue-cli npm run build空白頁的兩個坑 webpack gzip檔案壓縮優化打包檔案VueNPMUIWeb優化
- 一個vue-cli建立專案webpack相關都配置合簡介VueWeb
- vue + webpack 前端專案持續釋出整合部署VueWeb前端
- web專案部署上線(無虛擬主機,待學習)Web
- 在windows下匯入react專案並且打包編譯後部署到nginx上WindowsReact編譯Nginx
- Vue-CLI 專案搭建Vue
- 專案上線, 連線出錯
- IIS方式部署專案釋出上線
- SpringBoot專案如何打包部署到tomcat中去Spring BootTomcat
- 優雅配置vue專案,webpack 4.x + Vue模仿vue-cli配置 (一)VueWeb
- Vue-CLI 3.x 部署專案至生產伺服器Vue伺服器