vue專案構建-打包-釋出--簡易demo
一、vue專案構建
首先電腦要安裝node.js及npm
vue.js的官方文件給出的構建流程:
#全域性安裝 vue-cli
$ npm install --global vue-cli
#建立一個基於 webpack 模板的新專案
$ vue init webpack my-project
#安裝依賴,走你
$ cd my-project
$ npm install
$ npm run dev
二、vue專案的打包
#打包命令
$ npm run build
結果發現打包好後dist/index.html頁面裡的所有js,css,img等路徑有問題都是指向根目錄的。
此時需要修改config/index.js裡的assetsPublicPath的欄位,把初始專案裡的根目錄改為當前目錄,然後在執行打包命令,這是dist/index.html頁面就可以正常顯示了
- ./ 當前目錄
- ../ 父級目錄
- / 根目錄
三、釋出
把dist檔案裡內容放到apache伺服器上正常訪問就可以了
---------------------
然後開啟自己本地伺服器地址就可以了
http://localhost:8080/dist/index.html#/
相關推薦
vue專案構建-打包-釋出--簡易demo
一、vue專案構建 首先電腦要安裝node.js及npm vue.js的官方文件給出的構建流程: #全域性安裝 vue-cli $ npm install --global vue-cli #建立一個基於 webpack 模板的新專案 $ vue init webpack my-project
vue專案如何打包前後端不分離釋出手把手教學apache、nginx
vue專案如何打包前後端不分離釋出手把手教學apache、nginx vue專案如何不分離釋出 1、首先yarn build 我用了vue-cli腳手架,bulid後的dist資料夾裡的index.html有加版本號,那麼為什麼需要加版本號呢? a、回滾 b、解決瀏覽
使用webpack構建vue專案並打包
1.首先安裝node.js (因為需要npm) 2.安裝webpack npm install -g webpack 3.安裝淘寶映象 npm install -g cnpm --registry=https://registry.npm.taobao.org 4.npm安裝v
Springboot專案與vue專案整合打包
我的環境 * JDK 1.8 * maven 3.6.0 * node環境 1.為什麼需要前後端專案開發時分離,部署時合併? 在一些公司,部署實施人員的技術無法和網際網路公司的運維團隊相比,由於各種不定的環境也無法做到自動構建,容器化部署等。因此在這種情況下儘量減少部署時的服務軟體需求,打出的包數量也儘量
vue-cli webpack打包釋出到nginx伺服器,nginx.conf配置
server { listen 80; root /var/www/web/; index index.php index.html index.htm; server_name www.web.com;
Vue專案如何打包問題總結
當我們將 vue 專案完成後,面臨的就是如何將專案進行打包上線,放到伺服器中。我使用的是 vue-cli(simple) 腳手架,所以就講一下如何將專案進行打包,並放到 tomcat 上。 ** 先來描述一下期間遇到的問題有哪些:** 1、打包後將 dist 資料夾和 index.html 放到 tomc
你可能需要的一本前端小冊:Vue 專案構建與開發入門
最近抽時間寫了一本關於 Vue 的小冊:《Vue 專案構建與開發入門》,前前後後斷斷續續花了大概兩個月的時間。作為 Vue 的第一批使用者,同時也作為一名專欄作者,雖然我之前寫過好幾篇關於 Vue 的文章,但是該小冊是我第一本系統性介紹 Vue 專案構建與開發相關知識的書籍,也是我對於自己積累的 Vue 經驗
vue專案構建——父子元件中呼叫方法的執行順序
需求場景: 使用vue-cli建立的專案,父元件LeftMainmenu.vue裡通過<router-view>載入了子元件,父元件與子元件的methods裡各自有方法,初始化的時候在mounted裡進行了呼叫。預設的想法是想在父元件LeftMainmenu.vue的方法裡把axio
vue專案構建——使用 vue-cli 搭建專案
vue-cli 是一個官方釋出 vue.js 專案腳手架,使用 vue-cli 可以快速建立 vue 專案。 一、安裝node ~node.js中文官網http://nodejs.cn/下載安裝包 ~執行下一步
Vue專案構建開發筆記(vue-lic3.0構建的)
1、router.js裡面 { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].j
Vue專案-webpack打包
Vue專案打包 1.通過git 輸入如下命令: npm run build 執行打包命令:注意 build 並不是固定寫法,若想修改,可以自行在package.json檔案中修改。 執行打包命令成功後,就會生成一個dist資料夾,直接將該檔案丟到需要伺服器即可上線。 注意:
vue專案,打包後報錯以及空白問題
第一次從無到有自己搭建vue專案,npm run dev完全正常,打包之後頁面空白且報錯檔案找不到 1.修改config下面的index.js assetsPublicPath預設的是 ‘/’ 也就是根目錄。而我們的index.html和static在同一級目錄下面。
npm專案建立打包釋出
作業系統:windows 7前提是已經安裝了nodejs和npm。當前nodejs版本:v10.2.0;npm版本:6.1.0。本示例工具使用Visual Studio Code 1.20.1(vs code),也可以使用其它工具下面開始操作在某個磁碟分割槽下建立專案目錄:m
關於vue專案+webpack 打包的坑
今天遇到一個打包 npm run build 的坑 打包出來 發現不是html檔案 而是index.vue檔案,由於我是第一次用這個 ,然後網上查了很多資料 後來發現 在config/index.js裡面的檔案配置有問題 開發環境的是
從vue-cli到打包釋出
vue-cli初始目錄結構及說明 ├── README.md ├── build 編譯任務的程式碼 │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-
vue使用webPack打包釋出後頁面顯示空白
今天筆者將打包後,進行訪問,訪問到index.html,但是出現的是空白頁。打包命令:npm run build,打包後的檔案如下:這是因為index.html中引入的css ,js 的路徑不對:如下圖這個是因為webpack打包的時候引入js時使用的是絕對路徑導致的,修改w
React Native專案自動化打包釋出
今天這篇文章的目的是在rn專案的構建,並不會涉及到rn框架或者使用的講解,說起構建,特別是前端構建大家應該很快會想到webpack、Grunt、 Gulp等。而這些工具在rn專案中就顯得有些雞肋。所以在此給大家分享一下不使用構建工具實現rn專案自動化打包釋出的思路。涉及到的工
React專案如何打包釋出及遇到的坑
使用React開發有一段時間了,下面我就把自己一些心得體會分享給大家。我使用的是create-react-app腳手架生成的專案,這個腳手架一鍵生成react專案,非常方便,先簡單記錄一下這個新建專案的過程。一、打包在專案路徑下,敲npm run buil,就
【Java工具】java專案 Idea打包釋出工具,自動生成bat sh 、shell 指令碼
下載地址:更新日期:2017年12月7日09:03:17 連結:https://pan.baidu.com/s/1eRA8fD4 密碼:6sao 使用介紹: 以往我們打包部署程式,如果新增加了jar包要去shell腳本里新增加jar包引用,有時候還容易改錯。 而基於mav
vue-cli構建專案npm run build打包後怎麼在本地檢視效果
這時如果直接執行npn run build是可以執行並打包你的程式碼的,不會報任何異常或錯誤,但是會看到打包完成有這樣一句提示: 打開了控制檯,看到console tab下一片404的各種找不到資源 解決方案 開啟專案資料夾。找到config資料夾裡的index.