CODEWITHSUNDEEP
vue.jswebpack
Tom Lima
Tom Lima

Reputation: 1056

Vue js problems when building outside the src folder

I am working on an MPA with Vue and codeigniter. I have the following architecture:

-htdocs(root)
  - application
    - src
    - views
    - models
    - controllers

I work with my frontend basically in the src directory and the others are codeigniter MVC model directories. What I am doing is configuring the webpack to build directly in the views directory so that my codeigniter can consume the generated htmls, configured as follows: (in this case I set it up in the vue.config.js file )

outputDir: './views'

Up to this point everything works fine, wepback does the bundles and generates all the necessary files inside my views directory.The problem now is that the path to the files is the root of the project. Then he tries to fetch the files like this:

 <link rel="preaload" href="/css/chunk-common.45fe69c2.css" as="style">

So that it points to the correct path (application/views) I made the following configuration in the vue.config.js:

assetsDir: './views'

But now when he is going to do the build I have the following warning and the files bundle is not completed.

enter image description here

Does anyone know why this happens?

Upvotes: 1

Views: 1419

Answers (1)

Phil
Phil

Reputation: 164739

Assuming you want to access static assets under the base URL http://example.com/application/views/..., you'll want to set the publicPath property in your config

// vue.config.js
module.exports = {
  outputDir: 'views',
  publicPath: '/application/views/',
  // ...
}

FYI, if you ever do want to use assetsDir, don't prefix it with ./

A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.

An example would be

assetsDir: 'assets'

which would dump files in views/assets/css, views/assets/js, etc.

Upvotes: 2

Related Questions