項目nginx部署到非根目錄下vue配置方案

更新時間：2023年12月06日 14:47:22 作者：lilongwei4321

這篇文章主要介紹了項目nginx部署到非根目錄下vue配置方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

nginx部署到非根目錄下vue配置

1、修改config/index.js

2、修改路由route/index

3、若index.html

有引入static中的 js 和images需要配置 webpack.dev.conf.js 和 webpack.prod.conf.js

配置webpack.dev.conf.js ，大概在55行左右增加path配置

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
    }),

配置webpack.prod.conf.js ，大概在65行左右增加path配置

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

4、配置好后再來看一下

index.html引入js吧

 <script src=<%= htmlWebpackPlugin.options.path %>/javascript/rem.js></script>
 <script src=<%= htmlWebpackPlugin.options.path %>/javascript/md5.js></script>
 <script src=<%= htmlWebpackPlugin.options.path %>/javascript/moment.js></script>

5、引入static中的圖片

具體方法參考//www.dbjr.com.cn/javascript/3070665dl.htm

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue項目報錯Extra?semicolon?(semi)問題及解決
這篇文章主要介紹了vue項目報錯Extra?semicolon?(semi)問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue中解決el-date-picker更改樣式不生效問題
在使用Vue.js進行前端開發(fā)的過程中,Element?UI?是一個非常流行的UI庫,它提供了一套完整的組件來快速搭建美觀的用戶界面,但是我們經(jīng)常遇到一個問題使用Element?UI提供的el-date-picker組件時,嘗試自定義其樣式卻無法生效,所以本文給大家介紹如何解決這個問題
2024-10-10
使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例
今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue前端sku實現(xiàn)的方法小結(jié)
這篇文章主要為大家詳細介紹了vue前端sku實現(xiàn)的相關(guān)方法,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下
2024-11-11
vue使用socket與服務端進行通信的代碼詳解
這篇文章主要給大家介紹了vue如何使用socket與服務端進行通信的相關(guān)資料,在Vue中我們可以將Websocket類封裝成一個Vue插件,以便全局使用,需要的朋友可以參考下
2023-09-09
教你如何優(yōu)化?Vue.js?應用程序
Vue?3引入了Composition?API，這是一套新的API用于編寫組件，作為Options?API的替代，這篇文章主要介紹了如何優(yōu)化?Vue.js?應用程序,需要的朋友可以參考下
2023-02-02
Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧
2021-06-06
Vue?子組件傳父組件?$emit更新屬性方式
這篇文章主要介紹了Vue?子組件傳父組件?$emit更新屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue中electron框架自定義外部配置文件的配置與讀取辦法
使用Electron開發(fā)本地跨平臺的本地程序時,有時需要添加一些程序的配置文件,下面這篇文章主要給大家介紹了關(guān)于vue中electron框架自定義外部配置文件的配置與讀取的相關(guān)資料,需要的朋友可以參考下
2023-12-12
Vue常用指令詳解分析
這篇文章給大家詳細分析了關(guān)于VUE的常用的相關(guān)指令內(nèi)容，對此有需要的朋友們可以學習下。
2018-08-08