質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

762閲覧

Vue(vue cli)のサーバーでの実行方法

nieve

総合スコア33

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2018/01/12 01:42

編集2018/01/12 08:33

初心者で申し訳なさ過ぎるのですが、
ローカル環境にvue cliでインストールして作成したサイトをレンタルサーバーに入れてみたのですが、真っ白で、エラーもおきず。。。(「指定しているcssが見つからない」は出ているのですが。。。/localhostのサイトは見れています)

どうしたら実行できるのか、なのか、なにかの設定が間違っているから、なのかの検討もついておらず、ざっくりした質問になってしまうのですが、
どうしたらレンタルサーバー上のサイトを見ることができるでしょうか?

■追記↓↓■
すみません。いろいろ情報を追記いたします。

[vue.js]
gitからテンプレートを落としてきたものに必要なコンポーネントや画像、cssを追加したもの
↓テンプレート
[vuejs-templates/webpack]
https://github.com/vuejs-templates/webpack

[サーバー]
・webcrow(phpオプション無)

[ディレクトリ]
●ローカル開発環境
localhost/[下記ディレクトリ・ファイル]

●サーバー
host/test/[下記ディレクトリ・ファイル]

├── build │   ├── build.js │   ├── check-versions.js │   ├── logo.png │   ├── utils.js │   ├── vue-loader.conf.js │   ├── webpack.base.conf.js │   ├── webpack.dev.conf.js │   ├── webpack.prod.conf.js │   └── webpack.test.conf.js ├── config │   ├── dev.env.js │   ├── index.js │   ├── prod.env.js │   └── test.env.js ├── config.rb ├── index.html ├── node_modules │   └── [略] ├── package-lock.json ├── package.json ├── src │   ├── App.vue │   ├── assets │   │   └── [略] │   ├── components │   │   └── [略] │   ├── main.js │   └── router │   └── index.js ├── static └── test     └── [略]

[設定系ファイル]

[build/config/index.js] 'use strict' // Template version: 1.2.5 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: true, // If true, eslint errors and warnings will also be shown in the error overlay // in the browser. showEslintErrorsInOverlay: false, /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'eval-source-map', // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false, }, build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', /** * Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report } }
[router/index.js] import Vue from 'vue' import Router from 'vue-router' import pageTop from '@/components/page-top' ~[略]import その他もろもろコンポーネント~ Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'top', component: pageTop }, ~[略]その他もろもろパスとコンポーネント指定~ ] })

javascript

1[main.js] 2 3import Vue from 'vue' 4import App from './App' 5import router from './router' 6 7Vue.config.productionTip = false 8 9new Vue({ 10 el: '#app', 11 router, 12 template: '<App/>', 13 components: { App }, 14}) 15

■追記2■
node.jsをインストールしていないじゃないか!と気づきました。
レンタルサーバーにインストールするにはどうしたらよいのでしょうか?
ブラウザ表示系のこと以外がさっぱりわからずで。。。FTPクライアントとのファイルのやりとりで、node.jsを設置できるのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yatima

2018/01/12 04:56

作ったサイトのソースコード,ファイル・フォルダ構造,どこのレンタルサーバを使ったかなど書くと,回答が得られやすいと思いますよ.
nieve

2018/01/12 06:40

ご指摘、ありがとうございます!
guest

回答1

0

自己解決

対応するしてないレンサバだと把握しました!

投稿2018/01/12 11:25

nieve

総合スコア33

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問