I am trying to deploy my first application made with vue-cli,
everything works in npm run dev,
now when I build with npm run build, it created dist directory, with file structure:
index.html
static/
but every reference in index.html etc.. is to /app/static
src=/app/static/js/vendor.87e3cb
if I create a directory named app and copy static to /app than everything works.
I am obviously missing something simple.
simple enough, in /config/index.js file, I had assetsPublicPath: '/app/',
set only for build, but commented out for dev.
Related
I'm working on a portfolio in Vue.js. I added a button that allows the user to download a copy of my resume (a PDF file). The button works great in development. The file is in my public folder, which is supposed to be the static directory where all files are copied to the dist folder from. When I run the command vue build, the only thing copied from that folder is the index.html page. I have tried adding images to that folder and they are also not being copied over. My vue.config.js file looks like this:
module.exports = {
publicPath: '.'
};
So the relative paths are correct for the deployed files.
I have a similar setup working perfectly fine at my job, with the same version of Vue and vue-cli-service (both 6.14.11). I'm relatively new to Vue so any help would be greatly appreciated.
Edit: I've also noticed that even though I changed the <title> tag in public/index.html to "James Bell's Portfolio", the title in the production code is "Vue CLI App".
Here's the github repo: https://github.com/jamesthedev/portfolio
I figured it out! I was running vue build from the src folder. I needed to run vue-cli-service build from the root directory. Once I did that, all my static assets were copied to dist.
every time i build my nuxt project it creates a .nuxt folder and a dist folder in my root directory. what's the difference between them? i can run .nuxt by nuxt start command, but what's use of dist folder? i served it with a chrome extension and it worked fine. but i don't know what exactly it is. it's not a static version cause it's different from dist folder that nuxt generat command produce.it's fully interactive and when i run it by that extension i can't see any difference compare to runing .nuxt folder by nuxt start command.
I am new to vuejs. Recently I noticed that when I pull, it says conflict in app.js file. But I can't find the issue as app.js file is big.
Sould I add this file to gitignore file?
what is best practice to work with vue js?
I imagine you are building to a folder /dist and the app.js being conflited is the one inside of it.
You should ignore the /dist altogether. This folder is generated on the building process, meaning everyone that runs the project will update and create it.
Here is the default vue-cli .gitignore:
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
Not that not anything here may be useful to put in your own .gitignore. But you should for sure have at least node_modules and /dist.
If you are building the Vue project by scratch then I can say the following, when building/compiling your Vue project, best practices say that you should handle your entire production ready project in a dist/ or build/ directory where your main app.js file where the conflicts you are having would occur. This directory is only reserved for deploying the app and is not saved into your code repository, hence on why you should add to the .gitignore file the directory that holds such production files.
I'm using the latest vue-cli version 3.0.
My current issue is that whenever I run npm run build the files generated in the dist folder can't be run without a server.
I would like to be able to just open the index.html file on the browser. How do I go about doing this?
I ran into a similar issue and the following two changes helped me to make it work. Now I can just open index.html in Chrome as a file to run my SPA from file system.
In vue.config.js, I did not have a publicPath configured, which resulted in the default "/".
I had to configure it to empty string like this so that it uses relative paths:
module.exports = {
publicPath: '',
}
PS: Since Vue CLI 3.3 use publicPath instead of the now deprecated baseURL
I was using the history mode of vue-router, which does not work
on a local file system to route the paths back to index.html. So I
omitted the mode to go back to the default hash mode.
I was able to fix this issue by manually changing the url of the referenced files.
It's a bit of a pain, but this was a solution without having to mess around with the build configuration.
What you need to do:
Open index.html
Find href=/ and replace with href=
Find src=/ and replace with src=
NOTE: I was in need of this solution because I was creating a Phonegap app.
You can use the http-server module
npm install http-server -g
http-server dist/
normally the server starts at port 8080 so you can serve the build app on http://localhost:8080
I am trying to use Aurelia with Symfony backend. Part of our application is generated on the backend (good, old server-side MVC) and part of it should be an SPA. I have started aurelia app from skeleton-typescript (JSPM). Directory structure I am trying to create is as follows.
project/
src/
SomeModule/
SomeOtherModule/
FrontendModule/
build/
src/
app.ts
main.ts
...
index.html
package.json
...
web/
dist/
I have changed the output path in build/paths.js and gulp build correctly places the compiled files in the web/dist. I have also added a gulp task that copies the index.html into the web/.
The biggest problem I have is how to manage the JSPM dependencies. If I configure it to downlad the dependencies into web/jspm_dependencies, the application works when launched with Symfony but I am not able to configure karma unit tests properly (it says for example that it can't find aurelia-polyfills). If I leave the jspm_dependencies in the src/FrontendModule then I have to create a gulp task that copies it to the web/ and it takes a lot more than 10s => unacceptable.
This leds me to the following questions:
What is the suggested directory structure for Aurelia project when I am not going to serve the app from the project's root?
Is there any way to copy only the files needed by the application to the web/ (something like main-bower-files for bower)?
I know I can gulp export the app into the web/, but I want to use the same directory structure during the development, too.
I don't want to use browsersync server in the dev because of multi-nature of the application (SPA part and non-SPA part that has to be served from "real" backend).