項(xiàng)目nginx部署到非根目錄下vue配置方案

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

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

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.fzitv.net/javascript/3070665dl.htm

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vue中video標(biāo)簽如何實(shí)現(xiàn)不靜音自動(dòng)播放
最近在做大屏展示需要在一開始播放引導(dǎo)視頻,產(chǎn)生自動(dòng)播放需求,下面這篇文章主要給大家介紹了關(guān)于Vue中video標(biāo)簽如何實(shí)現(xiàn)不靜音自動(dòng)播放的相關(guān)資料,需要的朋友可以參考下
2023-01-01
vue2實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼
這篇文章主要介紹了vue2實(shí)現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼,需要的朋友可以參考下
2018-08-08
解決vue axios的封裝請(qǐng)求狀態(tài)的錯(cuò)誤提示問題
今天小編就為大家分享一篇解決vue axios的封裝請(qǐng)求狀態(tài)的錯(cuò)誤提示問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
elementui源碼學(xué)習(xí)仿寫el-collapse示例
這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)之仿寫el-collapse示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
Vue單頁(yè)面應(yīng)用中實(shí)現(xiàn)Markdown渲染
這篇文章主要介紹了Vue單頁(yè)面應(yīng)用中如何實(shí)現(xiàn)Markdown渲染，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2021-02-02
vue調(diào)試工具vue-devtools的安裝全過程
這篇文章主要介紹了vue調(diào)試工具vue-devtools的安裝全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目
本篇文章主要介紹了詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-05-05
修改Vue2項(xiàng)目運(yùn)行端口號(hào)配置后端代理教程
文章介紹了在Vue2項(xiàng)目中配置端口號(hào)和代理解決跨域問題的方法,包括在vue.config.js文件中增加端口號(hào)配置和設(shè)置代理路徑
2026-01-01
vue項(xiàng)目是如何運(yùn)行起來的
這篇文章主要介紹了vue項(xiàng)目是如何運(yùn)行起來的，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)流程介紹
這篇文章主要介紹了Vue數(shù)據(jù)增刪改查與表單驗(yàn)證的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-10-10