Moving a vuejs app built with webpack

Question

I created a Vuejs2 app using the vue-cli and the webpack template. All is working fine whilst using npm run dev. I am ready for releasing into production so I proceed to build the app using npm run build which outputs:

⠋ building for production...
Starting to optimize CSS...
Processing static/css/app.c8922694f1a64e6d88212a475e9acb3d.css...
Processed static/css/app.c8922694f1a64e6d88212a475e9acb3d.css, before: 13939, after: 13014, ratio: 93.36%
Hash: 81c876041faf79bde1db
Version: webpack 2.4.1
Time: 15715ms
                                                  Asset       Size  Chunks                    Chunk Names
               static/js/vendor.d14a81341e99db221385.js     595 kB       0  [emitted]  [big]  vendor
                           static/img/world.b9bd0db.png     407 kB          [emitted]  [big]  
              static/fonts/Montserrat-Light.9e52b00.ttf     192 kB          [emitted]         
           static/fonts/VarelaRound-Regular.eefe486.ttf     135 kB          [emitted]         
                      static/fonts/LANENAR_.97d2f1c.ttf    20.3 kB          [emitted]         
                  static/js/app.7e05b814ec0b7b7e4286.js    17.8 kB       1  [emitted]         app
             static/js/manifest.432e34173b16e9643e3a.js     1.5 kB       2  [emitted]         manifest
    static/css/app.c8922694f1a64e6d88212a475e9acb3d.css      13 kB       1  [emitted]         app
           static/js/vendor.d14a81341e99db221385.js.map    2.98 MB       0  [emitted]         vendor
              static/js/app.7e05b814ec0b7b7e4286.js.map     113 kB       1  [emitted]         app
static/css/app.c8922694f1a64e6d88212a475e9acb3d.css.map    26.3 kB       1  [emitted]         app
         static/js/manifest.432e34173b16e9643e3a.js.map    14.4 kB       2  [emitted]         manifest
                                             index.html  446 bytes          [emitted]         

  Build complete.

and a dist directory

If I go to the dist directory and run ↳ python -m SimpleHTTPServer 8000 then everything work as expected.

I now move the dist directory to my server document root and that's where everything falls apart. The app cannot find the compiled files anymore:

localhost/:1 GET http://localhost:8000/static/css/app.c8922694f1a64e6d88212a475e9acb3d.css 
localhost/:1 GET http://localhost:8000/static/js/manifest.432e34173b16e9643e3a.js 
localhost/:1 GET http://localhost:8000/static/js/app.7e05b814ec0b7b7e4286.js 
localhost/:1 GET http://localhost:8000/static/js/vendor.d14a81341e99db221385.js 
localhost/:1 GET http://localhost:8000/static/js/app.7e05b814ec0b7b7e4286.js

Obviously it's looking in the wrong place and should be looking for

http://localhost:8000/dist/static/css/app.c8922694f1a64e6d88212a475e9acb3d.css

Here is the index.html:

<script type=text/javascript src=/static/js/manifest.432e34173b16e9643e3a.js></script>
<script type=text/javascript src=/static/js/vendor.d14a81341e99db221385.js></script>
<script type=text/javascript src=/static/js/app.7e05b814ec0b7b7e4286.js></script>

How can I modify webpack config to make the app load under a server document root?

Doesn't it run as expected if you copy the contents of your /dist directory to your server root? The /dist directory itself shouldn't be copied to your server. — TimHayes
– TimHayes, Commented Apr 26, 2017 at 2:52
yes it does. Problem is I have multiple stuff under my server root and I did this app to sit it's on directory dist or my-app — neric
– neric, Commented Apr 26, 2017 at 6:22

neric · Accepted Answer · 2017-04-26 06:25:27Z

1

Modifying config/index.js like so under the build section:

 assetsPublicPath: '/dist/'

did the trick.

Change dist to whathever name you want to use

answered Apr 26, 2017 at 6:25

neric

4,3413 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

neric Over a year ago

similar question/solution: forum.vuejs.org/t/how-to-set-root-base-url-for-a-vuejs-project/…

Collectives™ on Stack Overflow

Moving a vuejs app built with webpack

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related