vue伺服器渲染req有網站小圖標地址
Ⅰ java web工程中如何使用vue2的伺服器渲染
從官方給出的渲染方案能看出，後端只是在頁面硬塞了數據及數據狀態進去，就效果而論渲染的工作還是前端負責，所以其他後端也能做到。具體看例子寫script標簽到頁面那段.
vue的服務端渲染，目前發現下面兩個包可以實現nodejs向其他伺服器請求數據。
Ⅱ vue渲染左邊菜單欄，點擊會出現二級菜單，渲染不成功
使用vue2服務端渲染的web站點，它的大概流程： node伺服器接受到客戶端的請求 然後向其他伺服器請求數據 把獲取到的數據給vue渲染 把渲染後的東西返回給客戶端
Ⅲ vue 網站圖標ico放在哪兒
直接放在跟目錄下是最好的，當然你也可以放在static目錄下。
Ⅳ vue前端工程代理之後怎麼查看請求介面的真實url呢
這樣就可以看到每次請求的真實路徑了
Ⅳ Vue用webpack搭建的項目遇到的disconnected問題
我專門花了幾天的時間研究了一下webpack這個目前來看比較熱門的模塊載入兼打包工具，發現上手並不是很容易，現將總結的一些有關配置的心得分享出來，歡迎大神來拍磚。。。
一、新建一個項目目錄，cd /d 定位進去，然後輸入npm init，會提示你填寫一些項目的信息，一直回車默認就好了，或者直接執行npm init -y 直接跳過，這樣就在項目目錄下生成了一個package.json文件。
二、接下來就是通過npm安裝項目依賴項，命令行輸入：npm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue-loader vue-html-loader vue-hot-reload-api css-loader style-loader webpack webpack-dev-server --save-dev ，繼續輸入npm install vue@^1.0.26 --save 。
這里注意的幾個點如下：
1.需要安裝的依賴項視具體的項目需求來定，我只是安了幾個必需的，後期會再加；
2.輸入之後如果一直報錯或者游標一直在轉動，要麼是npm版本太低(需要3+)，要麼將npm改成cnpm，如果沒有安裝淘寶NPM鏡像，可以先輸入npm install -g cnpm --registry=https://registry.npm.taobao.org，接著輸入cnpm -v查看是否安裝完成，然後就可以使用cnpm來代替npm；
3.可以先修改package.json文件中的devDependencies和dependencies，然後再輸入npm install進行一次性安裝（偷懶的做法，嘿嘿）；
4.dependencies中的vue默認安裝2+，如果dependencies中的vue選擇^1.0.26，那麼devDependencies中對應的vue-loader最好選擇^7.3.0，vue-hot-reload-api最好選擇^1.2.0，否則就會報錯；
5.dependencies中的vue-router默認安裝2+，無法識別router.map()這個方法，如果想要用回這個方法，最好選擇^0.7.13；
6.有時安裝一個依賴項，會提示還需要一並安裝別的依賴項，例如：如果要安裝bootstrap-loader，會提示要求安裝node-sass sass-loader resolve-url-loader；要安裝less-loader，會提示要求安裝less；
完成這一步之後，會在項目目錄下生成一個名node_moles的文件，對應的package.json文件中的內容變動如下（我額外添加了幾個依賴項）：
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "^6.18.0",
"css-loader": "^0.25.0",
"debug": "^2.2.0",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.24.1",
"jquery": "^3.1.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.2.3",
"vue-loader": "^7.3.0",
"webpack": "^1.13.3",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "^2.13.1"
},
"dependencies": {
"vue": "^1.0.26",
"vue-router": "^0.7.13"
}
三、在項目目錄下新建一個名為src的目錄，裡面用於存放入口文件（index.js）、項目源文件（html,css,js,img之類的）、組件（.vue後綴），我的src目錄結構大致如下：
src
-entry
-index.js
-pages
-components
-css
-img
-js
-index.html
-public
當然，有輸入目錄，就有輸出目錄，即在項目目錄下新建一個output目錄，用於放置生產出來的各種資源文件。
四、在項目目錄下新建一個名為build目錄，裡面用於存放各種配置文件，涉及到基礎配置、開發和生產環境、靜態伺服器以及熱載入，詳細的內容請看下面的代碼：
1.webpack.config.js（基礎配置文件）
// 引入依賴模塊
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
mole.exports = {
// 入口文件，路徑相對於本文件所在的位置，可以寫成字元串、數組、對象
entry: {
// path.resolve([from ...], to) 將to參數解析為絕對路徑
index:path.resolve(__dirname, '../src/entry/index.js'),
// 需要被提取為公共模塊的群組
vendors:['vue','vue-router','jquery'],
},
// 輸出配置
output: {
// 輸出文件，路徑相對於本文件所在的位置
path: path.resolve(__dirname, '../output/static/js/'),
// 設置publicPath這個屬性會出現很多問題：
// 1.可以看成輸出文件的另一種路徑，差別路徑是相對於生成的html文件；
// 2.也可以看成網站運行時的訪問路徑；
// 3.該屬性的好處在於當你配置了圖片CDN的地址，本地開發時引用本地的圖片資源，上線打包時就將資源全部指向CDN了，如果沒有確定的發布地址不建議配置該屬性，特別是在打包圖片時，路徑很容易出現混亂，如果沒有設置，則默認從站點根目錄載入
// publicPath: '../static/js/',
// 基於文件的md5生成Hash名稱的script來防止緩存
filename: '[name].[hash].js',
// 非主入口的文件名，即未被列在entry中，卻又需要被打包出來的文件命名配置
chunkFilename: '[id].[chunkhash].js'
},
// 其他解決方案
resolve: {
// require時省略的擴展名，遇到.vue結尾的也要去載入
extensions: ['','.js', '.vue'],
// 模塊別名地址，方便後續直接引用別名，無須寫長長的地址，注意如果後續不能識別該別名，需要先設置root
alias:{}
},
// 不進行打包的模塊
externals:{},
// 模塊載入器
mole: {
// loader相當於gulp里的task，用來處理在入口文件中require的和其他方式引用進來的文件，test是正則表達式，匹配要處理的文件；loader匹配要使用的loader，"-loader"可以省略；include把要處理的目錄包括進來，exclude排除不處理的目錄
loaders: [
// 使用vue-loader 載入 .vue 結尾的文件
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_moles/
},
// 使用babel 載入 .js 結尾的文件
{
test: /\.js$/,
loader: 'babel',
exclude: /node_moles/,
query:{
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
},
// 使用css-loader和style-loader 載入 .css 結尾的文件
{
test: /\.css$/,
// 將樣式抽取出來為獨立的文件
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader"),
exclude: /node_moles/
},
// 使用less-loader、css-loader和style-loade 載入 .less 結尾的文件
{
test: /\.less$/,
// 將樣式抽取出來為獨立的文件
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!less-loader"),
exclude: /node_moles/
},
// 載入圖片
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader',
query: {
// 把較小的圖片轉換成base64的字元串內嵌在生成的js文件里
limit: 10000,
// 路徑要與當前配置文件下的publicPath相結合
name:'../img/[name].[ext]?[hash:7]'
}
},
// 載入圖標
{
test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
loader: 'file-loader',
query: {
// 把較小的圖標轉換成base64的字元串內嵌在生成的js文件里
limit: 10000,
name:'../fonts/[name].[ext]?[hash:7]',
prefix:'font'
}
},
]
},
// 配置插件項
plugins: []
}
2.webpack.dev.config.js（開發環境下的配置文件）
// 引入依賴模塊
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 引入基本配置
var config = require('./webpack.config.js');
// 必須修改原配置中網站運行時的訪問路徑，相當於絕對路徑，修改完之後，當前配置文件下的很多相對路徑都是相對於這個來設定；
// 注意：webpack-dev-server會實時的編譯，但是最後的編譯的文件並沒有輸出到目標文件夾，而是保存到了內存當中
config.output.publicPath = '/';
// 重新配置模塊載入器
config.mole= {
// test是正則表達式，匹配要處理的文件；loader匹配要使用的loader，"-loader"可以省略；include把要處理的目錄包括進來，exclude排除不處理的目錄
loaders: [
// 使用vue-loader 載入 .vue 結尾的文件
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_moles/
},
// 使用babel 載入 .js 結尾的文件
{
test: /\.js$/,
loader: 'babel',
exclude: /node_moles/,
query:{
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
},
// 使用css-loader、autoprefixer-loader和style-loader 載入 .css 結尾的文件
{
test: /\.css$/,
// 將樣式抽取出來為獨立的文件
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader"),
exclude: /node_moles/
},
// 使用less-loader、autoprefixer-loader、css-loader和style-loade 載入 .less 結尾的文件
// 監聽 8888 埠，開啟伺服器
app.listen(8888, function (err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at localhost:8888');
})
5.dev-client.js（配合dev-server.js監聽html文件改動也能夠觸發自動刷新）
// 引入 webpack-hot-middleware/client
var hotClient = require(www.cdccgs.com?middleware/client');
// 訂閱事件，當 event.action === 'reload' 時執行頁面刷新
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload();
}
})
五、為了不必每次構建項目都要輸入webpack --display-moles --display-chunks --config build/webpack.config.js這條長命令，我們在package.js文件中修改「scripts」項：
"scripts": {
"build":"webpack --display-moles --display-chunks --config build/webpack.config.js",
"dev":"node ./build/dev-server.js"
}
注意：package.js中不能有注釋。
這樣，我們就可以通過執行 npm run build 來進行構建，同時還增加了一條開啟開發伺服器的命令 npm run dev。
Ⅵ 採用vue框架的網頁都會有vue的圖標嗎
您好，這個圖標是需要自己設置的。
怎麼在我們的Vue項目中設置自定義的網站圖標：
首先我們需要先製作個ico圖標，大小為32*32的，放到static文件夾下，我們把製作好的ico圖片改名為：favicon.ico（註：必須改名），放到我們項目中的static文件夾下。
分別在webpack.prod.conf.js和webpack.dev.conf.js裡面配置ico圖標路徑：添加代碼：favicon: path.resolve('static/img/favicon.ico') // 設置網站圖標，即可。
Ⅶ vue伺服器渲染怎麼獲取請求的路由地址
用vue伺服器給本地伺服器發送post請求，就可以獲取請求的路由地址
Ⅷ vue如何將項目部署到伺服器上並且使外網能夠訪問到
你的伺服器是什麼系統啊 ，，，linux LINUX、WINDOWS、NETWARE、UNIX。。
在linux
首先伺服器安裝node git nginx vue-cli
安裝好nginx 用你的公網ip訪問就可以看到 下面的頁面
這就可以了
還有 用express 部署這個 簡單些
Ⅸ Vue_cli 伺服器運行後URL變成http://localhost:8080/#/
在route/index.js文件中找到routes節點，在該節點上面同級定義
mode: 'history',
這樣，路由模式就變成了我們所熟悉的/A/B/C這種形式而沒有#在中間；
Ⅹ 怎麼把VUE項目部署到伺服器上面
1.使用xshell登錄到阿里雲伺服器。安裝nginx（本文安裝到/etc下）
[plain]view plain
cd/etc
apt-getupdate
apt-getinstallnginx
vim/etc/nginx/nginx.conf
userwww-data;
worker_processesauto;
pid/run/nginx.pid;
events{
worker_connections768;
#multi_accepton;
}
http{
##
#BasicSettings
##
tcp_nodelayon;
keepalive_timeout65;
types_hash_max_size2048;
#server_tokensoff;
#server_names_hash_bucket_size64;
#server_name_in_redirectoff;
include/etc/nginx/mime.types;
default_typeapplication/octet-stream;
##
#SSLSettings
##
ssl_protocolsTLSv1TLSv1.1TLSv1.2;#DroppingSSLv3,ref:POODLE
ssl_prefer_server_cipherson;
##
#LoggingSettings
##
access_log/var/log/nginx/access.log;
error_log/var/log/nginx/error.log;
##
#GzipSettings
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_comp_level6;
#gzip_buffers168k;
#gzip_http_version1.1;
##
#VirtualHostConfigs
##
gzipon;
gzip_disable"msie6";
#gzip_varyon;
#gzip_proxiedany;
#gzip_comp_level6;
#gzip_buffers168k;
#gzip_http_version1.1;
#gzip_typestext/plaintext/cssapplication/jsonapplication/javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascript;
##
#VirtualHostConfigs
##
include/etc/nginx/conf.d/*.conf;
include/etc/nginx/sites-enabled/*;
#以下為我們添加的內容
server{
listen80;
server_nameyour-ipaddress;
root/home/my-project/;
indexindex.html;
location/datas{
rewrite^.+datas/?(.*)$/$1break;
includeuwsgi_params;
proxy_passhttp://ip:port;
}
}
}
assetsPublicPath:'/test1/',
exportdefaultnewRouter({
base:'/test1/',//添加這行
linkActiveClass:'active',
routes
});
consturl='/datas/seller';
this.$http.get(url).then((response)=>{
.....
});
servicenginxstart
2.首先先配置nginx，然後再根據配置文件做下一步操作
打開/etc/nginx/nginx.conf文件
[plain]view plain
在nginx.conf中配置如下：
[plain]view plain
接下來就根據配置文件進行下一步工作。配置文件中的server_name後面是阿里雲伺服器的ip地址
3.配置文件中的listen是nginx監聽的埠號，所以需要在阿里雲伺服器上為80埠添加安全組規則
在本地的瀏覽器登錄阿里雲伺服器->進入控制台->點擊安全組->點擊配置規則->點擊添加安全組規則，之後配置如下（註：入方向和出方向都要配置）
4.配置文件中的root和index那兩行表示我們把項目文件夾放在/home/my-project下
例如有兩個項目文件夾分別為test1，test2，裡面都有index.html。則目錄結構如下
/home
|--my-project
|--test1
|--index.html
|--test2
|--index.html
則在瀏覽器輸入http://ip/test1/index.html
伺服器便會在/home/my-project中找到test1下的index.html執行；
如果在瀏覽器中輸入http://ip/test2/index.html
伺服器便會在/home/my-project中找到test2下的index.html執行；
這樣便可以在伺服器下放多個項目文件夾。
5.所以我們也需要在本地項目的config/index.js里的build下進行修改,如果要把項目放到test1下，則
[javascript]view plain
如果用到了vue-router，則修改/router/index.js
[javascript]view plain
6.nginx配置文件中的location則是針對跨域處理，表示把對/datas的請求轉發給http://ip:port,本文中這個http://ip:port下就是需要的數據，例如http://ip:port/seller,在本地項目文件中ajax請求數據的地方如下
[javascript]view plain
7.修改後在本地命令行下運行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上傳到伺服器的/home/my-project/test1下，目錄結構如下
/home
|--my-project
|--test1
|--index.html
|--static
8.啟動nginx
[plain]view plain
9.至此項目部署成功，在瀏覽器下輸入: http://ip/test1/index.html 即可