vue新構建專案打包如何在本地執行

阿新 • • 發佈：2021-11-01

vue新構建專案打包如何在本地執行

正常的建立vue專案後

vue init webpack test
npm run start
npm run build

會發現生成的dist包內的index.html在本地執行之後
並且在打包完控制檯能看到一行小字tip
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
意思就是必須搭建伺服器環境才能正常開啟，實際vscode有一個外掛能很方便的建立本地服務（外掛市場搜尋很容易找到）：
Live Server

然後就能很方便的建立本地伺服器環境了：

但是會發現開啟來還是一片白
開啟控制檯看一下訪問路徑

能發現和實際檔案存放地址是不一致的，所以是404
那說明打包後資源索引路徑不對，找到vue專案種config底下的index.js

裡面有關於dev也有關於build的配置，找到build的配置，能發現一個assetsPublicPath的欄位，

也就是說，預設的索引路徑是根目錄，所以在請求種會看到地址是這一段
http://127.0.0.1:5500/static/css/app.30790115300ab27614ce176899523b62.css
而不是實際的
http://127.0.0.1:5500/NewPortal/dist/static/css/app.30790115300ab27614ce176899523b62.css

所以只要把這裡的'/'改成'./'，然後重新打包，即可正常在本地開啟index檔案了# vue新構建專案打包如何在本地執行

vue新構建專案打包如何在本地執行

vue新構建專案打包如何在本地執行正常的建立vue專案後 vue init webpack test npm run start

vue專案打包本地部署（無後端）

1.拿到build後的檔案dist 2.在dist同級目錄下新建app.js檔案 3.安裝express npm install express --save

electron 9.0 + @vue/cli 構建專案的坑

1. typescript 版本 \"@types/node\": \"^12.12.6\", 不能用最新的 2. electron的配置裡面background.ts -->> nodeIntegration: true

vue-cli+webpack專案打包到伺服器後,ttf字型找不到的解決操作

更改 build/utils.js 檔案中 ExtractTextPlugin 外掛的options 配置： if (options.extract) { return ExtractTextPlugin.extract({

Vue3.x 從零開始（一）—— Vue-cli構建專案

vue ui 　　前言: vue-cli 是一個官方釋出 vue.js 專案腳手架，使用 vue-cli 可以快速建立 vue 專案，GitHub地址是：https://github.com/vuejs/vue-cli

Vue/cli 構建專案

Vue/cli 構建專案堅持寫作vue系列讓我自己收穫很多，對之前很多理解不透徹的地方又多了一些理解，也試圖將自己的理解變成文字分享給更多的人，無奈文字功底有限，有些地方可能表達的不是很清楚，還望各位讀者多多包

Vue cli構建專案

一、建立專案 vue create hello-world 你會被提示選取一個 preset。你可以選預設的包含了基本的 Babel + ESLint 設定的 preset，也可以選“手動選擇特性”來選取需要的特性。

vue專案通過配置webpack外掛DllPlugin進行優化打包速度，以及本地執行編譯速度

vue 開發過程中，儲存一次就會編譯一次，如果能夠減少編譯的時間，哪怕是一丁點，也能節省不少時間。開發過程中個人編寫的原始檔才會頻繁變動，而一些庫檔案我們一般是不會去改動的。如果能把這些庫檔案提取出來，就

vue-cli打包後本地執行dist檔案中的index.html操作

使用npm run build生成dist資料夾中的檔案是你需要上傳到伺服器上的檔案，直接開啟index.html會直接報錯

vue打包之後在本地執行，express搭建伺服器，nginx 本地伺服器執行

一、使用http-server 　　1.安裝http-server 　　　　npm install -g http-server 　　2.通過命令進入到dist資料夾

spring boot專案打包成jar，本地可以執行，伺服器就不行

用java -jar xxxx.jar命令，在本地啟動打包好的jar，在瀏覽器輸入“localhost:8080”，可以正常的訪問專案

解決vue專案打包上伺服器顯示404錯誤,本地沒出錯的問題

1、使用腳手架搭建一個vue專案 2、執行，在本地執行沒問題，接著打包上伺服器，遇到404的錯誤，如下

本地執行vue-cli build打包後的檔案

1.本功能基於node,確保已安裝node後執行下面步驟。　　一、新建個資料夾myinit,進去後開啟cmd,執行npm init初始化package.json檔案　　二、npm install express （cnpm install express）下載express框架　　三、cn

vue-cli3構建的專案打包部署在非根目錄下的伺服器時需要進行的配置

vue-cli3直接打包專案時，部署到伺服器。會出現，css，js檔案載入失敗，連結錯誤的問題。這個時候要修改config資料夾下的index.js檔案

vue專案打包部署nginx（本地部署）過程中遇到的問題

1.首先說一下流程：打包vue專案，打包後的dist直接放在自動生成的路徑就好 npm run build

Jenkins構建UI自動化專案，指定本地執行，沒彈起瀏覽顯示

1. 原因分析為什麼執行web沒有彈出瀏覽器，Jenkins日誌顯示正在執行中 jenkins是用windows installer 安裝成 windows的服務了，那麼啟動windows後jenkins為後臺服務，所以執行Project的時候瀏覽器為後臺執行，後

Vue專案打包壓縮的實現(讓頁面更快響應)

　　影響網頁響應速度的因素有很多，例如：http請求次數太多、伺服器本身處理請求太久、請求內容太大、JS指令碼執行耗時過長、瀏覽器迴流重繪等。網站頁面的響應速度與使用者體驗息息相關，直接影響到使用者是否願意

vue專案打包之開發環境和部署環境的實現

專案開發階段和生產環境可能不一樣如前端在開發階段，介面可能是自己使用 node.js 搭建的伺服器，API 返回的也都是假資料，等後臺介面開發好後，再切換成後臺提供的介面，等測試沒有問題，服務端上線後，又要改成正

Maven專案打包成可執行Jar檔案步驟解析

在使用Maven完成專案以後，如果是需要打包成可執行的Jar檔案，我們通過eclipse的匯出很麻煩，還得指定入口檔案的位置，還得說明依賴的jar包，既然都使用Maven了，很重要的一個目的就是讓這些繁瑣的操作簡單。我們可以

將Java專案打包成可執行的jar包

一、通過 eclipse 自帶打包測試專案： Main.java package com.bug; import org.junit.Test; public class Main {

vue新構建專案打包如何在本地執行

vue新構建專案打包如何在本地執行

相關推薦