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.
Does anyone know why this happens?
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.
Related
I am using vue cli 3.6.3.
How can i build a Vue.js project for production if the project is not in the web root?
Inside the webserver the project directory is "my/web/directory"
I start the project using webpack template, and set the publicPath and ROOT_API variables:
config/prod.env.js:
'use strict'
module.exports = {
NODE_ENV: '"production"',
ROOT_API: '"http://www.example.com/my/web/directory/myapi/myindex.php"',
publicPath: '/my/web/directory/'
}
After a npm run build i do upload the dist files (just inside the dist folder: static and index.html) the project point to the webserver root and did not find the js files.
How can i point to the right directory path?
I just find the assetsPublicPath inside the build section of the config/index.js, i do configure and now it is working fine.
I want to deploy a static nuxt.js application (built with nuxt generate) to a subdirectory of a webserver. nuxt places the generated files in the dist directory by default:
If I start a webserver on the parent directory of the dist folder and open the page with:
http://localhost:34360/dist/
the site fails to load the script files from the domain root directory:
I've tried setting the publicPath property in the nuxt config:
build: {
publicPath: '/dist/'
}
The appplication compiles to:
Now, nuxt moves the script files one level lower (/dist/dist) and searches on root level again (/dist), thus still not finding the files
How can I configure the site, such that scripts and assets are loaded and it is self contained, no matter on which directory on my server I put it?
The issue has been covered on GitHub but the suggested hints (using publicPath) didn't work, as shown above.
Sidenote: I do not want to specify the publicPath absolut (i.e. http://localhost:8080/dist), which would work but creates new problems.
You need router/base
router: {
base: '/dist/'
}
To complete #Aldarund answer, I use :
export default {
[…] // some code
router: {
base:
process.env.NODE_ENV === "development" ? process.env.BASE_URL : "/<subfolder>/"
} // where <subfolder> is the subfolder!
};
In Nuxt 3.0 use config's app.baseURL or NUXT_APP_BASE_URL environment variable.
I'm trying to understand webpack output.publicPath now. I'm reading webpack official docs now, but it dosen't help me.
So here is webpack.config.js
import webpack from 'webpack';
export default {
output: {
filename: 'bundle.js',
path: '/dist',
publicPath: '/assets' // what's this for?
},
plugins: [
// ...
]
};
So i guess, this makes all files reference /assets which is set to publicPath. like prefix.
When if i want to server static file in /assets with express server, i should makes /assets as static like app.use('/assets', express.static(__dirname + '/assets')) .
Then what is the purpose of publicPath ? is it just prefix for path?
I'm a bit late, but in case anyone else looked at this question like me and wished it had an answer -
This publicPath is used by webpack as an alias by which you can access your built files. When you also attach it to express static file serving as you've done above, you allow any files placed there by webpack to be requested via that path.
For example, if you have /assets as your publicPath and a file foo.js that is built during your webpack build, you can then access it by hitting localhost:[port]/assets/foo.js
I've spent so much time trying to wrap my head around path vs publicPath that my head nearly explodes. Here is what I understand (correct me if I'm wrong):
publicPath specifies the URL that Webpack needs to reference from the perspective of the index.html file.
For example:
module.exports = {
output: {
path: path.resolve(__dirname, 'dist/assets')
publicPath: '/assets/
}
}
This means the bundle is located at the dist/assets directory in your file system, but a request to it will look like localhost:3000/assets/bundle.js.
Inside the index.html, the script tag will look like this:
<script type="text/javascript" src="assets/bundle.js"></script>
It is even more important when you serve assets from external resources like a CDN.
What you do with Express static middleware is irrelevant AFAIK. But I still set the assets folder as the root directory from which to serve static files.
I would like to deploy my app to a virtual directory. I have been unable to figure out the correct configuration needed to run the app locally with a similar structure. For example, I'd like to run it from:
http://localhost:8080/demos
I have tried every combination of adding "demos" to publicPath and contentBase in my webpack config. The errors just between 404's on static assets and router errors from Aurelia.
It is documented by Aurelia router, you can add base tag to index.html header, <base href="/demos">, and set router root config.options.root = "/demos"; in configureRouter().
In addition, if your bundled js files are indeed served from directory, you need to modified baseDir in 2 places of aurelia.json: platform.baseDir and build.targets[0].baseDir.
I'm developing a Single Page App using Vue CLI and want history pushstate to work so I get clean URLs.
I have to follow this: https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps and add a _redirects file to the root of my site folder with the following:
/* /index.html 200
The problem is I don't know how to add this _redirects file to the root of my dist folder. I tried adding it to the static folder but it ends up in a subfolder and not in root. How can I include this file so that history mode works after deploying on Netlify ?
// config/index.js
build: {
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
vue-cli created app 3.x
For the new build setup using the vue-cli version 3.0.0-beta.x there is a public folder now and you do not need the following setup. Just put your _redirects file under the public folder root. When you build it will make a copy to the dist folder which will be used for your deploy.
vue-cli created app prior to 3.x
Vue.js uses webpack to copy the static assets. This is maintained in webpack.prod.conf.js for the production build which is what you will need in this case for Netlify. I believe the best and cleanest configuration is based on this solution.
Search the file for the new CopyWebpackPlugin in webpack.prod.conf.js.
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
Create a root ( folder in your project same level of the static folder )
You could name this anything you like, but I will use root for the example.
You would then make sure the _redirects file is in the new root directory or whatever you called it. In this case it is named root
Now modify the webpack.prod.conf.js CopyWebpackPlugin section to look like the following:
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
},
{
from: path.resolve(__dirname, '../root'),
to: config.build.assetsRoot,
ignore: ['.*']
}
])
You could also just use the netlify.toml file which tends to be a bit cleaner. Just put this in the file to get the redirect you were looking for:
# The following redirect is intended for use with most SPA's that handles routing internally.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
netlify.toml is normally stored in the root of your site repository.
You can find more info about this file here.
I've tried Rutger Willems's snippet without the last line and it works. Credit goes to Hamish Moffatt.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Just in case you're looking for an answer on Nuxt instead of Vue, add the _redirects file to the static/ directory.
You can simply add the _redirects file to your /public directory in your vue app